用纯CSS编写的下拉式网页代码二级菜单无法显示怎么回事
<!DOCTYPEhtml><head><styletype="text/css">#guanggaotiao{width:901px;height:200px;back...
<!DOCTYPE html>
<head>
<style type="text/css">
#guanggaotiao{
width:901px;
height:200px;
background:pink;
position:absolute;
top:0px;
left:0px;
}
#daohanglan{
width:901px;
height:55px;
position:absolute;
background:brown;
top:200px;
left:0px;
}
#neirong{
width:9011px;
height:350px;
position:absolute;
background:yellow;
top:250px;
left:0px;
}
ul{list-style:none; margin:0px; padding:0px;}
ul li{float:left; height:50px; width:100px; font-size:18px; text-align:center;}
ul li a{
text-decoration:none;
background:pink;
color:white;
border-right:2px solid white;
border-bottom:1px solid white;
display:block;
line-height:48px;
}
ul li a:hover{background:cyan; text-decoration:none;}
ul li ul li a{
text-decoration:none;
border-bottom:1px solid white;
line-height:48px;
background:brown;
}
ul li ul li a:hover{
text-decoration:none;
background:gold;
}
ul li ul {visibility: hidden; }
ul li:hover ul {visibility: visible; }
</style>
</hesd>
<body>
<div id="guanggaotiao">广告条</div>
<div id="daohanglan">
<ul>
<li><a href="@#">01</a></li>
<li><a href="@#">02</a>
<ul>
<li><a href="@#">001</a></li>
<li><a href="@#">002</a></li>
</ul>
</li>
<li><a href="@#">03</a></li>
<li><a href="@#">04</a>
<ul>
<li><a href="@#">003</a></li>
<li><a href="@#">004</a></li>
</ul>
</div>
<div id="neirong">内容</div>
</body>
</html> 展开
<head>
<style type="text/css">
#guanggaotiao{
width:901px;
height:200px;
background:pink;
position:absolute;
top:0px;
left:0px;
}
#daohanglan{
width:901px;
height:55px;
position:absolute;
background:brown;
top:200px;
left:0px;
}
#neirong{
width:9011px;
height:350px;
position:absolute;
background:yellow;
top:250px;
left:0px;
}
ul{list-style:none; margin:0px; padding:0px;}
ul li{float:left; height:50px; width:100px; font-size:18px; text-align:center;}
ul li a{
text-decoration:none;
background:pink;
color:white;
border-right:2px solid white;
border-bottom:1px solid white;
display:block;
line-height:48px;
}
ul li a:hover{background:cyan; text-decoration:none;}
ul li ul li a{
text-decoration:none;
border-bottom:1px solid white;
line-height:48px;
background:brown;
}
ul li ul li a:hover{
text-decoration:none;
background:gold;
}
ul li ul {visibility: hidden; }
ul li:hover ul {visibility: visible; }
</style>
</hesd>
<body>
<div id="guanggaotiao">广告条</div>
<div id="daohanglan">
<ul>
<li><a href="@#">01</a></li>
<li><a href="@#">02</a>
<ul>
<li><a href="@#">001</a></li>
<li><a href="@#">002</a></li>
</ul>
</li>
<li><a href="@#">03</a></li>
<li><a href="@#">04</a>
<ul>
<li><a href="@#">003</a></li>
<li><a href="@#">004</a></li>
</ul>
</div>
<div id="neirong">内容</div>
</body>
</html> 展开
2个回答
展开全部
因为你的“导航栏”区域和“内容”区域都是绝对定位，而排在后面的z-index会默认比前面的高，所以“内容”区域遮住了“导航栏”的下拉区域，只要将这两个区域分别加z-index属性，并且后面的值比前面的值小就行了。另外，考虑到浏览器兼容性，下拉菜单不能用li的hover伪类来实现，需要配合js实现比较好。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {padding:50px}
* {margin:0;padding:0;font-size:12px}
li{list-style:none}
#menu .m1 {
position:relative;
float:left
}
.a1 {
display:block;
width:80px;
height:30px;
margin-right:10px;
line-height:30px;
background:#000;
text-align:center
}
.m1 ul {
display:none
}
.m1 ul li a {
display:block;
height:25px;
line-height:25px;
background:blue;
color:#fff
}
.m1:hover ul {
display:block
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li class="m1"><a href="#" class="a1">menu1</a>
<ul>
<li><a href="#">sub_menu1</a></li>
</ul>
</li>
<li class="m1"><a href="#" class="a1">menu2</a></li>
<li class="m1"><a href="#" class="a1">menu3</a></li>
<li class="m1"><a href="#" class="a1">menu4</a></li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
