欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

怎么用css中的ul li ul li ul li 实现三级菜单

更新时间: 2014-01-05 00:53:36 责任编辑: Author_N1

 

如何用css中的ul li ul li ul li 实现三级菜单
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多级菜单</title>
<style type="text/css">
body{
font-family:"微软雅黑";
font-size:12px;
line-height:1.5;
}
ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd{
margin:0px;
padding:0px;
font-size:12px;
font-weight:normal;
}
ul{
list-style:none;
}
img{
border-style:none;
}
a{
color:#000;
text-decoration:none;
}
a:hover{
color:#ff0000;
}

#menu2{
width:100px;
border:1px solid #cccccc;
margin-top:20px;
}
#menu2 ul{
list-style:none;
margin:0px;
padding:0px;
}
#menu2 ul li{
background:#eeeeee;
padding:0px 24px;
height:26px;
line-height:26px;
border-bottom:1px solid #cccccc;
position:relative;
}
#menu2 ul li ul{
display:none;
border:1px solid #cccccc;
border-bottom:none;
position:absolute;
left:100px;
top:0px;
width:100px;
}
#menu2 ul li ul li{
background:#eeeeee;
padding:0px 24px;
height:26px;
line-height:26px;
border-bottom:1px solid #cccccc;
position:relative;
}

#menu2 ul li ul li ul{
display:none;
border:1px solid #cccccc;
border-bottom:none;
position:absolute;
left:100px;
top:0px;
width:100px;
}

#menu2 ul li:hover ul{
display:block;
}

#menu2 ul li ul li:hover ul{
display:block;
}



</style>
</head>

<body>

<div id="menu2">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">域名主机</a>
<ul>
<li><a href="#">域名注册</a></li>
<li><a href="#">企业邮局</a></li>
</ul>
</li>
<li><a href="#">网站建设</a>
<ul>
<li><a href="#">企业网站</a></li>
<li><a href="#">其它网站</a>
<ul>
<li><a href="#">行业网站</a></li>
<li><a href="#">论坛程序</a></li>
<li><a href="#">商城程序</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>

目前这样的,第二级菜单显示的时候,三级菜单也跟着显示了,不知道哪里出错了,求高手指导,谢谢先……

文件已上传到:http://www.zjgqy.com.cn/t4.html
--参考方法--

#menu2 ul li:hover ul li ul{
   display:none;
}

加一个这个,否则第二集菜单显示时会连带把第三级 ul 显示出来
--参考方法--
这个肯定是JS代码的问题了,有一句说得很对,IE6不支持伪类,所以你后加的那句隐藏三级列表的也失效了,应该在JS里面给它加上不显示!
--参考方法--
因为在鼠标移动到二级菜单的时候三级菜单没有隐藏
只要在<style type=text/css>#div1 ul li:hover ul li ul{display:none}</style>就可以了
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 00:53:36
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1093/
本文WWW.DOC100.NET DOC100.NET版权所有。