摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS样式</title><style>*{margin:0 auto;padding: 0px;}.head{width: 100%;heig
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS样式</title>
<style>
*{margin:0 auto;padding: 0px;}
.head{width: 100%;height:60px;line-height:60px;background: #ccc;}
.nav{width:1000px;height:60px;background: wheat;}
span{display:block;width:100px;height: 60px; margin-left:20px;color: red;float: left;}
.one{height:60px;float: left;}
.one li{width:100px;text-align: center;list-style: none;float: left;margin: 0 10px;}
.one li:hover{background: pink;}
.two{height: 120px;display:none;}
.two li{width:100px;height:60px;text-align: center;list-style: none;margin: 5px 0;}
.two li:hover{background:#ccc;}
.sel:hover .two{display: block;}
</style>
</head>
<body>
<!--css样式-->
<div class="head">
<div class="nav">
<span>我的导航</span>
<ul class="one">
<li class="sel">HTML
<ul class="two">
<li>小菜单1</li>
<li>小菜单2</li>
</ul>
</li>
<li>CSS#</li>
<li>JAVASCRIPT</li>
<li>PHP</li>
</ul>
</div>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-14 09:12:13
老师总结：代码思路清晰,作业相对简单哦,可以找点网页版精美导航练习
