您的位置：首页 > Web前端 > CSS

CSS制作多极下拉菜单

2016-06-02 12:55 363 查看

<!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>

<title>蓝色二级下拉导航菜单</title>

<meta http-equiv="content-Type"
content="text/html;charset=gb2312">



<style type="text/css">

body{margin-top:100px;}

.preload1 {background:
url(/teixiao/UploadFiles_4612/200811/20081105091626668.gif);}

.preload2 {background:
url(/teixiao/UploadFiles_4612/200811/20081105091627331.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px;
background:#fff
url(/teixiao/UploadFiles_4612/200811/20081105091627301.gif)
repeat-x; position:relative; z-index:500; font-family:arial,
verdana, sans-serif;}

#nav li.top {display:block; float:left; height:38px;}

#nav li a.top_link {display:block; float:left; height:35px;
line-height:33px; color:#ccc; text-decoration:none; font-size:11px;
font-weight:bold; padding:0 0 0 12px; cursor:pointer;background:
url(/teixiao/UploadFiles_4612/200811/20081105091627301.gif);}

#nav li a.top_link span {float:left; display:block; padding:0 24px
0 12px; height:35px; background:
url(/teixiao/UploadFiles_4612/200811/20081105091627301.gif) right
top no-repeat;}

#nav li a.top_link span.down {float:left; display:block; padding:0
24px 0 12px; height:35px; background:
url(/teixiao/UploadFiles_4612/200811/20081105091627825.gif)
no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background:
url(/teixiao/UploadFiles_4612/200811/20081105091626668.gif)
no-repeat;}

#nav li:hover a.top_link span
{background:url(/teixiao/UploadFiles_4612/200811/20081105091626668.gif)
no-repeat right top;}

#nav li:hover a.top_link span.down
{background:url(/teixiao/UploadFiles_4612/200811/20081105091627331.gif)
no-repeat right top;}

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub

{left:1px; top:38px; background: #9bdae9; padding:3px; border:1px
solid #00b2fe; white-space:nowrap; width:90px; height:auto;
z-index:300;}

#nav li:hover ul.sub li

{display:block; height:20px; position:relative; float:left;
width:90px; font-weight:normal;}

#nav li:hover ul.sub li a

{display:block; font-size:11px; height:18px; width:88px;
line-height:18px; text-indent:5px; color:#000;
text-decoration:none;border:1px solid #9bdae9;}

#nav li ul.sub li a.fly

{background:#9bdae9
url(/teixiao/UploadFiles_4612/200811/20081105091627827.gif) 80px
6px no-repeat;}

#nav li:hover ul.sub li a:hover

{background:#00b2fe; color:#fff; border-color:#fff;}

#nav li:hover ul.sub li a.fly:hover

{background:#00b2fe
url(/teixiao/UploadFiles_4612/200811/20081105091627835.gif) 80px
6px no-repeat; color:#fff;}

#nav li:hover li:hover ul,

#nav li:hover li:hover li:hover ul,

#nav li:hover li:hover li:hover li:hover ul,

#nav li:hover li:hover li:hover li:hover li:hover ul

{left:90px; top:-4px; background: #9bdae9; padding:3px; border:1px
solid #00b2fe; white-space:nowrap; width:90px; z-index:400;
height:auto;}

#nav ul,

#nav li:hover ul ul,

#nav li:hover li:hover ul ul,

#nav li:hover li:hover li:hover ul ul,

#nav li:hover li:hover li:hover li:hover ul ul

{position:absolute; left:-9999px; top:-9999px; width:0; height:0;
margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,

#nav li:hover li:hover li:hover a.fly,

#nav li:hover li:hover li:hover li:hover a.fly,

#nav li:hover li:hover li:hover li:hover li:hover a.fly

{background:#00b2fe
url(/teixiao/UploadFiles_4612/200811/20081105091627835.gif) 80px
6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,

#nav li:hover li:hover li:hover li a.fly,

#nav li:hover li:hover li:hover li:hover li a.fly

{background:#9bdae9
url(/teixiao/UploadFiles_4612/200811/20081105091627827.gif) 80px
6px no-repeat; color:#000; border-color:#9bdae9;}

</style>

<script type="text/javascript">

stuHover = function() {

var cssRule;

var newSelector;

for (var i = 0; i <
document.styleSheets.length; i++)

for (var x = 0; x <
document.styleSheets[i].rules.length ; x++)

{

cssRule =
document.styleSheets[i].rules[x];

if
(cssRule.selectorText.indexOf("LI:hover") != -1)

{

newSelector = cssRule.selectorText.replace(/LI:hover/gi,
"LI.iehover");

document.styleSheets[i].addRule(newSelector ,
cssRule.style.cssText);

}

}

var getElm =
document.getElementByIdx("nav").getElementsByTagName_r("LI");

for (var i=0; i<getElm.length;
i++) {

getElm[i].onmouseover=function() {

this.className+="
iehover";

}

getElm[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" iehover\\b"),
"");

}

}

}

if (window.attachEvent) window.attachEvent("onload",
stuHover);

</script>

</head>

<body>



<div id="navbar">

<ul
id="nav">

<li class="top"><a
href="#"
class="top_link"><span>首页</span></a></li>

<li class="top"><a
href="#" id="services"
class="top_link"><span
class="down">关于我们</span></a>

<ul class="sub">

<li><a
href="#">公司介绍</a></li>

<li><a
href="#">组织结构</a></li>

</ul>

</li>

<li class="top"><a
href="#" id="services"
class="top_link"><span
class="down">公司文化</span></a>

<ul class="sub">

<li><a
href="#">企业文化</a></li>

<li><a
href="#">团队介绍</a></li>

</ul>

</li>

<li class="top"><a
href="#" id="shop"
class="top_link"><span
class="down">视频资源</span></a>

<ul class="sub">

<li><a
href="#">经典案例</a></li>

<li><a
href="#">服务范围</a></li>

</ul>

</li>

<li class="top"><a
href="#" id="privacy"
class="top_link"><span>合作伙伴</span></a></li>

<li class="top"><a
href="#" id="shop"
class="top_link"><span
class="down">联系我们</span></a>

<ul class="sub">

<li><a
href="#">联系方式</a></li>

<li><a
href="#">招聘信息</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

出处：http://www.wangyeba.com/teixiao/zonghe/200811/12756.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航