为什么我设置margin-top后，背景颜色整体上去了，而下面没了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

<style>

*{margin:0;padding:0;font-size:14px;}

ul{list-style:none;height:50px;padding-left:30px; border-bottom:5px solid #900; }

li{float:left;margin-top:20px;}

text-decoration:none;display:block;height:30px;line-height:30px;width:120px;background-color:#ccc;margin-bottom:1px;text-align:center; }

.on,a:hover{

color:#fff;

background-color:#F60;

line-height:40px;

border-radius:5px;

margin-top:-10px}

</style>

</head>

<body>

</ul>

</body>

</html>

慕粉2613161

2017-07-23

源自：导航条菜单的制作 4-1

关注问题我要回答

5383

操作

收起

1 回答

咸鱼辰
2017-07-24

你只是设置margin-top，没有修改高度。在.on,a:hover样式里增加一句 height: 40px就可以了。

<!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>无标题文档</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<style>
*{margin:0;padding:0;font-size:14px;}
ul{list-style:none;height:50px;padding-left:30px; border-bottom:5px solid #900; }
li{float:left;margin-top:20px;}
a{
text-decoration:none;display:block;height:30px;line-height:30px;width:120px;background-color:#ccc;margin-bottom:1px;text-align:center;  }
.on,a:hover{
height:40px;
color:#fff;
background-color:#F60;
line-height:40px;
border-radius:5px;
margin-top:-10px}
</style>
</head>

<body>
<ul class="ulLeft">
<li><a class="on" href="#">安庆</a></li>
<li><a href="#">换肤</a></li>
<li><a href="#">消息</a></li>
</ul>
</body>
</html>