HTML 怎样修改 二级菜单的高度、宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑推荐</title>
<style>
body,nav ul,.nav-white,nav,.logo{ margin: 0; padding: 0;}
body{font-size: 12px; background: #EFF3F5;}
.wrad{ }
ul{ list-style: none;}
a{ text-decoration: none; color:#000;}
nav,.subnav,.works,.page,.copyright{ width: 1180px; margin: 0 auto;}
.nav-white{background: #fff; height: 80px;}
.logo{ width: 60px; height: 80px;display: inline-block; float: left; padding-top:10px; }
.logo img{ width: 100%;line-height: 80px;}
nav li{ float: left; font-size: 14px; line-height: 80px; text-align: center;}
nav li a{ display: block; width: 80px;}
nav li a:hover{ background: #EFF3F5;}
nav li ul{ display: none; float: none; line-height: none; padding: 0; margin: 0; height: 20px; line-height: 20px}
nav li:hover ul{ display: block; width: 80px; }
nav li ul a:hover{background:#fff;}
footer{ background: #EAEEF1;}
</style>
</head>
<body>
<div>
<div>
<nav>
<a href="http://www.ui.cn/"><img src="./images/logo.png" title="UI中国" ></a>
<ul>
<li><a href="">首页</a></li>
<li><a href="">作品</a></li>
<li>
<a href="#" target="_self">学习<i class="nav-i "></i></a>
<ul>
<li><a href="">专题</a></li>
<li><a href="">教程</a></li>
<li><a href="">书籍</a></li>
<li><a href="">每周临摹</a></li>
</ul>
</li>
<li>
<a href="">活动 <i></i></a>
<ul>
<li> <a href="href="http://activbty.ui.cn/game.html" target="_self"">UTalk</a></li>
<li><a href="http://activbty.ui.cn/game.html" target="_self">设计大赛</a></li>
</ul>
</li>
<li><a href="">招聘</a></li>
<li><a href="">培训</a></li>
<li><a href="">更多</a></li>
</ul>
</nav>
</div>
<div></div>
<div></div>
<div></div>
<footer>
<div></div>
</footer>
</div>
</body>
</html>
谢饼干浏览 2617回答 2
2回答
-
多佛朗明哥
一级菜单的line-height属性影响了！这样布局应该使用子元素选择器来写样式！ -
echo_kinchao
s是不是line-height的高度影响了
随时随地看视频慕课网APP
Html/CSS
Html5
CSS3