версия ие 6.0
хтмл код :
<!--меню навигации-->
<div id="menu">
<ul>
<li><a href="index.php" id="current">Главная</a></li>
<li><a href="projects.php" >Проекты</a>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
</ul>
</li>
<li><a href="technology.php">Технология</a>
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
</ul>
</li>
<li><a href="contacts.php">Контакты</a></li>
</li>
<li><a href="about.php">О нас</a></li>
</ul>
</div>
CSS код меню навигации :
#menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
#menu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#menu li{
float:left;
}
#menu li a{
color:#3E7999;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#menu li a:hover{
color:#000000;
text-decoration:none;
}
#menu li ul{
background:#e0e0e0;
border-left:2px solid #0079B2;
border-right:2px solid #0079B2;
border-bottom:2px solid #0079B2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:150px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#menu li:hover ul,
#menu li.jshover ul{
display:block;
visibility:visible;
}
#menu li li{
display:block;
float:none;
width:150px;
}
#menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
visibility:visible;
width:125px;
}
#menu li ul a:hover{
background:#A1B7C4;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
visibility:visible;
}
#menu p{
clear:left;
}
#menu #current{
background:url(images/current-bg.gif) top left repeat-x;
color:#333333;
}
код между тегами head :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js_hover.js" type="text/javascript"></script>
</head>
файл js_hover.js :
<script type="text/javascript">
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagNa me("LI");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>
