一个用CSS的下拉菜单样式

nav.css 内容如下：

 

body {
 
}
a {
 text-decoration: none;
}
#navMenu {
 width: 100%; height: 34px; line-height: 34px; overflow: hidden; display: block; background-image: url("../image/nav_bg.jpg"); background-repeat: repeat-x;
}
.menu1 {
 z-index: 6;
}
.menu1 {
 margin: 0px; padding: 0px; list-style-type: none;
}
.menu1 ul {
 margin: 0px; padding: 0px; list-style-type: none;
}
.menu1 li {
 height: 34px; line-height: 34px; float: left;
}
.menu1 a {
 height: 34px; line-height: 34px; float: left;
}
.menu1 li {
 background-position: 0px; margin: 0px 0px 0px -2px; padding: 0px; background-image: url("../image/nav_fg.jpg"); background-repeat: no-repeat;
}
.menu1 a {
 margin: 0px; width: 107px; text-align: center; color: rgb(108, 167, 199); text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; font-weight: normal; display: block;
}
.menu1 li:hover {
 color: rgb(255, 123, 14);
}
.menu1 a:hover {
 color: rgb(255, 123, 14);
}
.menu1 li a:hover {
 background-position: top; text-decoration: none; background-image: url("../image/hover_bg.jpg"); background-repeat: repeat-x;
}
.menu1 li ul li a:hover {
  background-image:url(Images/bg_lan2.gif);
}
.menu1 li ul {
 margin-left: -999em; position: absolute;
}
.menu1 li ul li {
 height: 24px; line-height: 24px; background-image:url(Images/bg_lan.gif);
}
.menu1 li ul li a {
 height: 24px; line-height: 24px;  background-image:url(Images/bg_lan.gif);width:80px;
}
.menu1 li:hover ul {
 padding: 4px; width: 80px; margin-top: 34px; margin-left: 0px; border-bottom-color: rgb(13, 28, 49); border-bottom-width: 1px; border-bottom-style: solid; filter: alpha (opacity=90); position: absolute; z-index: 5; opacity: 0.9; background-color: rgb(13, 24, 42); _clear: both; _margin-top: 0px;
}
.menu1 li.sfhover ul {/*黑色背景的样式*/
 padding: 1px; width: 80px; margin-top: 34px; margin-left: 0px; border-bottom-color: rgb(13, 28, 49); border-bottom-width: 1px; border-bottom-style: solid; filter: alpha (opacity=90); position: absolute; z-index: 5; opacity: 0.9; background-color: rgb(13, 24, 42); _clear: both; _margin-top: 0px;
}
.menu1 li:hover ul li a {
 margin: 0px; padding: 0px 0px 0px 8px; width: 80px; text-align: left; color: rgb(108, 167, 199); text-transform: none; font-size: 13px; font-weight: normal; display: block;
}
.menu1 li.sfhover ul li a {/*背景图片样式*/
 margin: 0px; padding: 0px 0px 0px 8px; width: 75px; text-align: left; color: rgb(108, 167, 199); text-transform: none; font-size: 13px; font-weight: normal; display: block;
}
.menu1 li:hover ul li a:hover {
 background-color: rgb(13, 24, 42);
}
.menu1 li.sfhover ul li a:hover {
 background-color: rgb(13, 24, 42);
}
.menu1 ul li ul {
 display: none;
}
.menu1 ul li ul li a:hover {
 width: 50px; margin-top: -2px; margin-left: 50px; display: block; filter: alpha (opacity=85); position: absolute; background-color: rgb(102, 102, 102);
}

 

/**********页面中的调用方法**********/

 

<LINK rel="stylesheet" type="text/css" href="nav.css" media="all">  //调用和JS
<SCRIPT type="text/javascript">
  sfHover = function() {
  var sfEls = document.getElementById("navMenu").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
  sfEls[i].οnmοuseοver=function() {
  this.className+=" sfhover";
  }
  sfEls[i].οnmοuseοut=function() {
  this.className=this.className.replace(new RegExp(" sfhover//b"), "");
  }
  }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
  </SCRIPT>

 

 

菜单代码如下，注意DIV和UL的ID

 

  <div id="navMenu" style="height:31px; width:715px; background-image:url(Images/bgMenu.gif); margin-left:50px; _margin-left:25px; float:left;">
  <ul  class="menu1">
  <li ><img src="images/menu_01.gif" />
   <UL style="margin-top:0px;_margin-top:30px; ">
  <LI><A href="ny.html">子栏目一</A></LI>
  <LI><A href="ny.html">子栏目二</A></LI>
  <LI><A href="ny.html">子栏目三</A></LI>
  </UL>
  </li>
  <li><img src="images/menu_02.gif" /></li>
  <li><img src="images/menu_03.gif" /></li>
  <li><img src="images/menu_04.gif" /></li>
  <li><img src="images/menu_05.gif" /></li>
  <li><img src="images/menu_06.gif" /></li>
  <li><img src="images/menu_07.gif" /></li>
  <li><a href="ny.html"><img src="images/menu_08.gif" border="0" /></a></li>
  </ul>
  </div>