为什么下面的程序效果中2级列表中只显示一个<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=utf-8" />
<title>css实现2级菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
ul,li,a{list-style:none;text-decoration:none;}
.nav{margin:100px 0 50px 0;width:110px;}
.nav a{display:block;width:110px;height:36px;line-height:36px;text-align:center;color:#000;background:#999;}
.nav a:hover{background:#F00;}
.li1{position:relative;}
.li2{position:absolute;left:109px;top:0px;width:110px;height:36px;text-align:center;color:#000;background:#999;display:none;}
.li1:hover .li2{display:block;}
.li2:hover{background:#999;}
</style>
</head>
<body>
<ul class="nav">
<li class="li1">
<a href="">水果</a>
<ul class="nav2">
<li class="li2"><a href="">苹果</a></li>
<li class="li2"><a href="">香蕉</a></li>
</ul>
</li>
<li class="li1">
<a href="">蔬菜</a>
<ul class="nav2">
<li class="li2"><a href="">土豆</a></li>
<li class="li2"><a href="">白菜</a></li>
</ul>
</li>
<li class="li1">
<a href="">玩具</a>
<ul class="nav2">
<li class="li2"><a href="">汽车</a></li>
<li class="li2"><a href="">飞机</a></li>
</ul>
</li>
</ul>
</body>
</html>
海阔天空171回答
-
display_none
.li2{position:absolute;left:109px;top:0px;width:110px;height:36px;text-align:center;color:#000;background:#999;display:none;}你给两个li设置了同样的position:absolute;left:109px;top:0px; 它们重叠了，所以只看到一个
随时随地看视频慕课网APP
Html/CSS