下拉及多级弹出式菜单

下拉及弹出式菜单是网站设计中常用导航形式，这种菜单形式能够充分利用页面现有空间隐藏与显示更多内容，并能够对内容进行合理的分类显示。

这里是用JS+DIV+CSS实现。

比如页面中存在如下代码

<ul id="nav"> <li><a href="">文章</a> <ul>        <li><a href="">CSS教程</a></li>        <li><a href="">DOM教程</a></li>        <li><a href="">XML教程</a></li>        <li><a href="">FLASH教程</a></li> </ul> </li> <li><a href="">参考</a> <ul>        <li><a href="">XHTML</a></li>        <li><a href="">XML</a></li>        <li><a href="">CSS</a></li> </ul> </li> <li><a href="">BLOG</a>        <ul>               <li><a href="">全部</a></li>               <li><a href="">网页技术</a></li>               <li><a href="">UI技术</a></li>               <li><a href="">FLASH技术</a></li>        </ul> <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代码中首先

ul {      padding:0;      margin:0;      list-style:none;                   }      li {             float:left;             width:160px;      }      li ul {             display:none;             top::20px;                          }      li:hover ul, li.over ul{             display:block;      }

先用list-style:none;去掉所有圆点标示。

display:none;隐藏了ul;

       li:hover ul定义了li元素hover状态下的ul元素,

li.over ul定义了class为over的li元素下的ul元素.

这两种状态下都使用display:block; 当设置的时候不仅其指派的元素将显示，而且将显示为一个块状，如没用的话，元素只会按自己的内容在屏幕上占有的区域进行显示，而使用的时，元素将会自动形成一个方块作为自己的占为符，这种设计对于做大按钮来说是非常方法的.

上面的方法，在IE7和FireFox中都可以正常运行. 但在IE6中就没办法。

要使IE6支持的话，添加下面的代码

<script type="text/javascript">        startList = function() {               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.οnmοuseοut=function() {                                           this.className=this.className.replace(" over","");                                    }                             }                      }               }        }        window.onload = startList; </script>

这样就可以实现效果，不过界面不美观，在CSS中加入

ul li a{               display:block;               font-size:12px;               border:1px solid #ccc;               padding:3px;               text-decoration:none;               color:#777;        }        ul li a:hover{               background-color:#f 4f 4f 4;        }

这是横向的下拉表现

纵向的如下

ul {               margin:0;               padding:0;               list-style:node;               width:130px;               border-bottom:1px solid #ccc;               font-size:12px;                     }        ul li{               position:relative;        }        li ul{               position:absolute;               left:129px;               top:0;               display:none;        }        ul li a{               display:block;               text-decoration:none;               color:#777;               background:#fff;               padding:5px;               border:5px;               border-bottom:0;        }        li:hover ul, li.over ul {               display:block;        }