请问 为什么我这里弄出来 效果和题目中的不一样呢 ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style type="text/css">
/*样式补充*/
*{font-family: "宋体"}
div,h3,ul{margin:0;padding: 0;list-style: none}
.big{width: 100PX; padding: 20px 50px}
h3{background-color: #EEEEEE;border-style:1px solid gary;width: 100%;text-align:center;padding: 3px 0}
ul{display:none;
background-color:white;
border-right:1px #ccc solid;
border-left:1px #ccc solid;
text-align: center;
line-height: 20px}
li{width: 100px}
.clothes{border-bottom:1px #ccc solid; }
div h3{ border:1px #ccc solid;}
.div1:hover .elec{display: block}
.div2:hover .wash{display: block}
.div3:hover .clothes{display: block}
</style>
</head>
<body>
<div class="big">
<div class="div1">
<h3>家电</h3>
<ul class="elec">
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</div>
<div class="div2">
<h3>洗护</h3>
<ul class="wash">
<li>洗衣液</li>
<li>消毒液</li>
<li>柔顺剂</li>
</ul>
</div>
<div class="div3">
<h3>衣物</h3>
<ul class="clothes">
<li>衬衫</li>
<li>裤子</li>
<li>卫衣</li>
</ul>
</div>
</div>
</body>
</html>老师 我这里是哪里错了呢 ?我实在是没有找到 呢
1
收起
正在回答
2回答
你好,代码实现效果没有问题,鼠标移入可以显示出子菜单:

1、可能在子菜单宽度上窄一些,可以设置ul的宽度:

把li设置的宽度去掉。
2、代码中最后一个样式大部分都没有分号,每个属性结尾都建议添加上分号,避免出现问题。
3、子菜单显示出来的代码可以简化一下:

可以重新测试下,祝学习愉快!

恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星