请大家给小弟我看看这个上拉菜单到底如何了
日期：2014-05-17 浏览次数：20906 次
请大家给我看看这个下拉菜单到底怎么了
这是源码请高手看一下
- HTML code
<!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 runat="server">
<title>123</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- saved from url=(0013)about:internet -->
</head>
<div id="bar">
<div id="nav">
<ul>
<li><a href="#" target="_blank">网站主页</a>
</li>
<li><a href="#" target="_blank">文档管理</a>
<ul style="z-index:88;">
<li>类别管理</li>
<li>信息管理</li>
<li>文档下载</li>
<li>文档上传</li>
</ul>
</li>
<li><a href="#" target="_blank">用户管理</a>
<ul style="z-index:99;">
<li>用户管理</li>
<li>用户管理</li>
<li>用户管理</li>
<li>用户管理</li>
<li>用户管理</li>
</ul>
</li>
<li><a href="#" target="_blank">留言建议</a>
</li>
</ul>
</div>
</div>
</body>
</html>
- CSS code
a{
text-decoration:none;
}
#bar{
width:100%;
height:40px;
z-index:999;
padding-top:5px;
background:url(bar_bg.gif) repeat-x;
}
#nav{
width:960px;
height:30px;
margin:0 auto;
}
#nav ul {
padding:0;
margin:0;
list-style-type: none;
}
#nav ul li{
list-style:none;
float:left;
position:relative;
width:100px;
}
#nav ul li a{
display:block;
text-align:center;
line-height:28px;
padding-left:9px;
padding-right:9px;
color:#bdbde2;
height:30px;
}
#nav ul li:hover a{
background-color:#000066;
color:#00FF99;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display:block;
top:30px;
position:absolute;
width:80px;
color:#00FF99;
text-align:center;
}
#nav ul li:hover ul li {
background-color:#333333;
display:block;
color:#bdbde2;
height:28px;
padding-top:4px;
width:100px;
}
#nav ul li:hover ul li a {
display:block;
color:#bdbde2;
background:#1C5579;
}
#nav ul li:hover ul li a:hover {
background-color:#000066;
color:#00FF99;
}
这是源码请高手看一下
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
