css结合js制作下拉菜单代码

最新推荐文章于 2024-04-22 15:43:00 发布

霸王毛

最新推荐文章于 2024-04-22 15:43:00 发布

阅读量778

点赞数

分类专栏： js 文章标签： js css 下拉菜单

本文链接：https://blog.csdn.net/maoyed/article/details/20031917

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@page pageEncoding="utf-8"
contentType="text/html;charset=utf-8" %>

<HTML>
<HEAD>
<title>WebForm5</title>

ul#navmenu-h li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu-h ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu-h ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu-h a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
background: #CCC;
color: #FFF;
}

/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
float: none;
background: #EEE;
color: #666;
}

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

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

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

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
display: none;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
display: block;
}

</style><script language="javascript">
navHover = function() {
    var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
    for (var i=0; i<lis.length; i++) {
        lis[i].οnmοuseοver=function() {
            this.className+=" iehover";
        }
        lis[i].οnmοuseοut=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"),

"");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", navHover);
        </script>
    </HEAD>
   <body>
   <ul id="navmenu-h">
   <li><a href="#">Root nav item1</a>
   <ul>
   <li><a href="#">Sub nav item1</a></li>
<li><a href="#">Sub nav item1-2</a></li>
   </ul>
   </li>
<li><a href="#">Root nav item2</a>
   <ul>
   <li><a href="#">Sub nav item2</a></li>
<li><a href="#">Sub nav item2-2</a></li>
   </ul>
   </li>
<li><a href="#">Root nav item3</a>
   <ul>
   <li><a href="#">Sub nav item3</a></li>
<li><a href="#">Sub nav item3-2</a></li>
   </ul>
   </li>
   </ul>
</body>
</html>

霸王毛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css结合js制作下拉菜单代码

%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8" %> WebForm5 /* Root = Horizontal, Secondary = Vertical */ul#navmenu-h { margin: 0; border: 0 none
复制链接

扫一扫