js导航下拉菜单效果

作者：袖梨 2022-07-02

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w***3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

提示：您可以先修改部分代码再运行

<title>CSS Menu - Horizontal</title> 
<style type="text/<a href=" http: target="_blank">css"> 
ul#navmenu { 
margin: 0; 
border: 0 none; 
padding: 0; 
 /*For KHTML*/ 
list-style: none; 
 
background:#f90;
} 
ul#navmenu li { 
margin: 0; 
border: 0 none; 
padding: 0; 
float: left; /*For Gecko*/ 
display: inline; 
list-style: none; 
position: relative; 
 
background:url(images/navborder.jpg) no-repeat right center;
} 
ul#navmenu ul { 
margin: 0; 
border: 0 none; 
padding: 0; 
 
list-style: none; 
display: none; 
position: absolute; 
top:30px; 
left: 0; 
} 
ul#navmenu ul li { 
float: none; /*For Gecko*/ 
display: block !important; 
display: inline; /*For IE*/

line-
} 
/* Root Menu */ 
ul#navmenu a { 
padding: 0 6px; 
float: none !important; /*For Opera*/ 
float: left; /*For IE*/ 
display: block; 
color: #fff; 
font: bold 10px Verdana, Arial, Helvetica, sans-serif; 
text-decoration: none; 
height: auto !important; 
height: 1%; /*For IE*/ 
line-
} 
/* Root Menu Hover Persistence */ 
ul#navmenu a:hover, 
ul#navmenu li:hover a, 
ul#navmenu li.iehover a { 
margin:0px;
color: #F60; 
} 
/* 2nd Menu */ 
ul#navmenu li:hover li a, 
ul#navmenu li.iehover li a { 
float: none; 
background: #c3e5fe; 
color: #333; 
display:block;
border:solid 1px #fff;

line-
} 
/* 2nd Menu Hover Persistence */ 
ul#navmenu li:hover li a:hover, 
ul#navmenu li:hover li:hover a, 
ul#navmenu li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover a { 
background: #76b6e4; 
color: #FFF;

line-
} 
/* 3rd Menu */ 
ul#navmenu li:hover li:hover li a, 
ul#navmenu li.iehover li.iehover li a { 
background: #c3e5fe; 
color: #666;

line-
} 
/* 3rd Menu Hover Persistence */ 
ul#navmenu li:hover li:hover li a:hover, 
ul#navmenu li:hover li:hover li:hover a, 
ul#navmenu li.iehover li.iehover li a:hover, 
ul#navmenu li.iehover li.iehover li.iehover a { 
background: #76b6e4; 
color: #FFF;

line-
margin:0px;
} 
ul#navmenu ul ul, 
ul#navmenu ul ul ul { 
display: none; 
position: absolute; 
top: 0; 
left: 160px; 
} 
/* Do Not Move - Must Come Before display:block for Gecko */ 
ul#navmenu li:hover ul ul, 
ul#navmenu li:hover ul ul ul, 
ul#navmenu li.iehover ul ul, 
ul#navmenu li.iehover ul ul ul { 
display: none; 
} 
ul#navmenu li:hover ul, 
ul#navmenu ul li:hover ul, 
ul#navmenu ul ul li:hover ul, 
ul#navmenu li.iehover ul, 
ul#navmenu ul li.iehover ul, 
ul#navmenu ul ul li.iehover ul { 
display: block; 
} 
</style> 
<script type="text/JavaScript"> 
navHover = function() { 
var lis = document.getElementById("navmenu").getElementsByTagName("LI"); 
for (var i=0; i<lis.length; i++) { 
lis[i].onmouseover=function() { 
this.className+=" iehover"; 
} 
lis[i].onmouseout=function() { 
this.className=this.className.replace(new RegExp(" iehoverb"), ""); 
} 
} 
} 
if (window.attachEvent) window.attachEvent("onload", navHover); 
</script> 
 
 
<ul id="navmenu"> 
    <li> 
    </li>
<li> 
        <ul> 
            <li> 
                <ul> 
                    <li> 
                    </li>
<li> 
                    </li>
<li> 
                </li>
</ul> 
            </li>
            <li> </li>
        </ul> 
    </li>
    <li> 
        <ul> 
            <li> 
                <ul> 
                    <li> 
                </li>
</ul> 
            </li> 
       </ul> 
    </li> 
    <li> 
        <ul> 
            <li>
</li>
</ul>
</li>
</ul>

提示：您可以先修改部分代码再运行

js导航下拉菜单效果

相关文章

精彩推荐