五级菜单

最新推荐文章于 2022-09-28 14:37:07 发布

tanggongde

最新推荐文章于 2022-09-28 14:37:07 发布

阅读量551

点赞数 1

文章标签： function xhtml javascript html border 文档

本文链接：https://blog.csdn.net/tanggongde/article/details/1412941

版权

<!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html   xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta   http-equiv="Content-Type"   content="text/html;   charset=utf-8"   />
<title>无标题文档</title>
<style>
body   {
margin:   7px;
font:12px   Verdana,   Arial,   Helvetica,   sans-serif;
}
*   {
list-style-type:   none;
margin:   0px;
padding:   0px;
border:   thin   none;
}
#nav   {
position:   absolute;
font-size:   9px;
opacity:   0.8;
}
#nav   a   {
display:   block;
width:   100px;
height:   15px;
padding:   3px   5px   12px;
background:   #666;
color:   #fff;
text-decoration:   none;
}
#nav   a:hover   {
background:   #333;
}
#nav   li   {
width:   120px;
background:   #ccc;
padding-bottom:   3px;
}
#nav   ul   {
position:   absolute;
margin-left:   115px;
margin-top:   -30px;
}
#nav   ul   {
display:   none;
}
#nav   li.show   ul   {
display:   block;
}
#nav   li.show   li   ul   {
display:   none;
}
#nav   li   li.show   ul   {
display:   block;
}

#nav li li.show   li   ul   {
display:   none;
}
#nav   li li.show li.show   ul   {
display:   block;
}
   #nav li li.show li.show   li   ul   {
display:   none;
}
#nav   li li.show li.show li.show ul   {
display:   block;
}
</style>
<script   language="javascript"   type="text/javascript">
function   menuFix()   {
var   sfEls   =   document.getElementById("nav").getElementsByTagName("li");
for   (var   i=0;   i<sfEls.length;   i++)   {
sfEls[i].οnmοuseοver=function()   {
this.className+=(this.className.length>0?   "   ":   "")   +   "show";
}
sfEls[i].οnmοuseοut=function()   {
this.className=this.className.replace(new   RegExp("(   ?|^)show//b"),   "");
}
}
}
window.οnlοad=menuFix;
</script>
</head>

<body>
<ul   id="nav">
<li><a   href="#">nav   item</a>
<ul>

<li><a   href="#">nav   item1</a>
   <ul>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a>
      <ul>

       <li><a   href="#">nav   item</a>
         <ul>
          <li><a   href="#">nav   item</a></li>
          <li><a   href="#">nav   item</a></li>
         </ul>
       </li>

       <li><a   href="#">nav   item</a></li>
      </ul>
    </li>
   </ul>
</li>

<li><a   href="#">nav   item2</a>
   <ul>
    <li><a   href="#">nav   item</a>
    <ul>
       <li><a   href="#">nav   item</a></li>
       <li><a   href="#">nav   item</a></li>
      </ul>
    </li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
   </ul>
</li>

    <li><a   href="#">nav   item3</a>
    <ul>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    </ul>
    </li>


    <li><a   href="#">nav   item4</a>
    <ul>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    </ul>
    </li>
</ul>
</li>

    <li><a   href="#">nav   item</a>
    <ul>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    </ul>
    </li>

   <li><a   href="#">nav   item</a>
   <ul>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    <li><a   href="#">nav   item</a></li>
    </ul>
   </li>
</ul>
</body>
</html>