摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>导航测试页面</title> <style type="text/css"> *{margin:0 auto;padding:0px;} .box{box-sh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航测试页面</title>
<style type="text/css">
*{margin:0 auto;padding:0px;}
.box{box-shadow:5px 20px 40px red inset;width:600px;height:50px;border-radius: 5px;margin-top: 10px;}
li{width:120px;height:50px;line-height:50px;text-align:center;list-style: none;float:left;font-size:16px;font-family: 楷体;}
li:hover{background-color:#3388FF;border-radius: 5px;}
.box a{text-decoration:none;color:#fff;}
.box a:hover{text-decoration: underline;color:blue;}
.box li ul{display: none}
.box li:hover ul{display: block}
.box li ul li{box-shadow: 5px 20px 40px red inset;border-radius: 5px}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">新闻动态</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="#">产品展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-20 15:01:27
老师总结：完成的不错，学到后面知识点越来越多，案例也越来越精彩继续加油！
