JavaScript下拉菜单

JavaScript 下拉菜单演示地址

< ! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
     < meta http-equiv = " Content-Type " content = " text/html; charset=utf-8 " />
     < title > JavaScript下拉菜单 </ title >
     < style type = " text/css " >
        * {
            padding:0;
            margin:0;
        }
        body {
            font-family:verdana, sans-serif;
            font-size:small;
        }
        #navigation, #navigation li ul {
            list-style-type:none;
        }
        #navigation {
            margin:20px;
        }
        #navigation li {
            float:left;
            text-align:center;
            position:relative;
        }
        #navigation li a:link, #navigation li a:visited {
            display:block;
            text-decoration:none;
            color:#000;
            width:120px;
            height:40px;
            line-height:40px;
            border:1px solid #fff;
            border-width:1px 1px 0 0;
            background:#c5dbf2;
            padding-left:10px;
        }
        #navigation li a:hover {
            color:#fff;
            background:#2687eb;
        }
        #navigation li ul li a:hover {
            color:#fff;
            background:#6b839c;
        }
        #navigation li ul {
            display:none;
            position:absolute;
            top:40px;
            left:0;
            margin-top:1px;
            width:120px;
        }
        #navigation li ul li ul {
            display:none;
            position:absolute;
            top:0px;
            left:130px;
            margin-top:0;
            margin-left:1px;
            width:120px;
        }
     </ style >
     < script type = " text/javascript " >
        function displaySubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }
     </ script >
</ head >
< body >
     < ul id = " navigation " >
         < li onmouseover = " displaySubMenu(this) " onmouseout = " hideSubMenu(this) " >
             < a href = " # " > 栏目1 </ a >    
             < ul >
                 < li >< a href = " # " > 栏目1->菜单1 </ a ></ li >
                 < li >< a href = " # " > 栏目1->菜单2 </ a ></ li >
                 < li >< a href = " # " > 栏目1->菜单3 </ a ></ li >
                 < li >< a href = " # " > 栏目1->菜单4 </ a ></ li >
             </ ul >
         </ li >
         < li onmouseover = " displaySubMenu(this) " onmouseout = " hideSubMenu(this) " >
             < a href = " # " > 栏目2 </ a >    
             < ul >
                 < li >< a href = " # " > 栏目2->菜单1 </ a ></ li >
                 < li >< a href = " # " > 栏目2->菜单2 </ a ></ li >
                 < li >< a href = " # " > 栏目2->菜单3 </ a ></ li >
                 < li >< a href = " # " > 栏目2->菜单4 </ a ></ li >
                 < li >< a href = " # " > 栏目2->菜单5 </ a ></ li >
             </ ul >
         </ li >
         < li onmouseover = " displaySubMenu(this) " onmouseout = " hideSubMenu(this) " >
             < a href = " # " > 栏目3 </ a >    
             < ul >
                 < li onmouseover = " displaySubMenu(this) " onmouseout = " hideSubMenu(this) " >
                     < a href = " # " > 栏目3->菜单1 </ a >
                     < ul >
                         < li >< a href = " # " > 菜单1->子菜单1 </ a ></ li >
                         < li >< a href = " # " > 菜单1->子菜单2 </ a ></ li >
                         < li >< a href = " # " > 菜单1->子菜单3 </ a ></ li >
                         < li >< a href = " # " > 菜单1->子菜单4 </ a ></ li >
                     </ ul >
                 </ li >
                 < li >< a href = " # " > 栏目3->菜单2 </ a ></ li >
                 < li onmouseover = " displaySubMenu(this) " onmouseout = " hideSubMenu(this) " >
                     < a href = " # " > 栏目3->菜单3 </ a >
                     < ul >
                         < li >< a href = " # " > 菜单3->子菜单1 </ a ></ li >
                         < li >< a href = " # " > 菜单3->子菜单2 </ a ></ li >
                         < li >< a href = " # " > 菜单3->子菜单3 </ a ></ li >
                     </ ul >
                 </ li >
             </ ul >
         </ li >
     </ ul >
</ body >
</ html >