CSS+Javascript制作导航菜单

纵式导航:

BODY:

 

<div class="main">

    <ul class="style1" id="nn">
      <li><a href="#">导航菜单</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
       <li style=" left:auto;"><a href="#">导航菜单</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
     <li style=" left:auto;"><a href="#">导航菜单</a>
        <ul>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
          <li><a href="#">下拉菜单</a></li>
        </ul>
      </li>
 
    </ul>
</div>

<!----以下是CSS代码 ------->

CSS:

 

<style>
.main{
 width:450px;
 height:auto;
 border:1px solid #666666;
 margin:100px auto;
 background:#3399CC;
 padding:20px;
 font-size:18px;
 font-family:"宋体";
 }
ul{
margin:0;
padding:0;
background:#00FF99
}
#nn {
border:1px solid #666666;
height:24px;
width:303px;
margin:0 auto;
border-right:0px;

}
#nn li{
float:left;
width:100px;
height:24px;
list-style:none;
border-right:1px solid #666666;
background:#996666;
}
#nn li a{
display:block;
font-size:12px;
text-align:center;
line-height:24px;
color:#000000;
font-weight:bold;
text-decoration:none;
}
#nn li ul{
list-style:none;
width:99px;
background:#eeeeee;
position:absolute;
left:-999px;
}
#nn li .sfhover ul{
left:auto
}
#nn li ul li{
width:99px;
height:24px;
background:#eeeeee;
border:1px solid #cccccc;
}
#nn li ul li a{
font-size:12px;
color:#333333;
}
#nn li ul li a:hover{
color:#ffffff;
background:#333333;
}

<!--这里是关键技术,后面通过Javascript动态使div加上 .sfhover类产生子菜单下拉效果 -->
#nn li.sfhover ul{
left:auto;
}
</style>

JAVASCRIPT:

<script language="javascript">
 function sfHover()
 {
   var sfEls=document.getElementById("nn").getElementsByTagName("LI");
   for(var i=0;i<sfEls.length;i++)
   {
     sfEls[i].onmouseover=function()
  {
    this.className+="sfhover";
  
  }
  sfEls[i].onmouseout=function()
  {
    this.className=this.className.replace("sfhover","")
  }
   }
 }
 if(window.attachEvent) window.attachEvent("onload",sfHover)
</script>

<!--------------------end------------------------->

 

横式导航:

BODY:

<ul id="nav">
<li><a href="#">菜单栏一</a>
   <ul>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
   </ul>
</li>
<li><a href="#">菜单栏二</a>
   <ul>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
   </ul>
</li>
<li><a href="#">菜单栏三</a>
   <ul>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
     <li><a href="#">子菜单</a></li>
   </ul>
</li>
</ul>

CSS:

<style>
  ul{
  padding:0;
  margin:0;
  list-style:none;
  width:130px;
  border-bottom:1px solid #9900FF;
  font-size:12px;
  }
  ul li{
  padding:5px;
  margin:0;
  width:120px;
  list-style:none;
  background:#CCFF66;
  color:#777777;
  border:1px solid #9900FF;
  border-bottom:0;
  position:relative;
  }
  ul li a{
  display:block;
  text-align:center;
  text-decoration:none
  }
  li ul{
  position:absolute;
  left:129px;
  top:0;
  display:none;
  }
  <!---这是IE6的一个BUG -->
  *html ul li{
  float:left
  }
 <!----这里是关键技术,后面通过Javascript调用 over 类------>  
  li.over ul
  {
  display:block;
  }
</style>

Javascript:

<script language="javascript">
  function startList()
  {
    if (document.all && document.getElementById)
 {
   navRoot=document.getElementById("nav")
   for(i=0;i<navRoot.childNodes.length;i++)
     {
    node=navRoot.childNodes[i]
    if(node.nodeName=="LI")
      node.onmouseover=function()
   {
    this.className+="over"
   }
   node.onmouseout=function()
   {
   this.className=this.className.replace("over","")
   }
  }
 }
  }
  window.onload=startList;
</script>

<!------------end------------------>