<!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>
1 回答
display_none
TA贡献52条经验 获得超13个赞
.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; 它们重叠了，所以只看到一个
- 1 回答
- 0 关注
- 1284 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消