摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网</title> <style type="text/css"> *{margin: 0px;paddi
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
li{list-style: none;}
.head{height: 60px;width: 100%;margin-top: 10px;}
.head-left{height: 60px;float: left;margin-left: 20px;}
.left-logo{float:left;width: 160px;height: 60px;background: url(https://www.baidu.com/img/baidu_jgylogo3.gif) no-repeat center;margin-top: -5px}
.left-input{float:left;width: 700px;margin-left: 10px;height: 60px;}
.baidu{background-color: #317EF3;border:none;height: 32px;color: #fff;padding:0px 30px}
.baidu a{color: #fff;text-decoration: none;}
.leftinput{height: 30px;padding-right: 400px;margin-top: 13px}
.menu{float: right;height: 20px;width:350px;font-size: 11px;line-height: 20px;text-align: center;margin-top: 20px;}
.menu ul{list-style: none;}
.menu ul li{float: left;margin-right: 15px;position: relative;width:60px;}
.menu ul li:hover ul{display: block;}
.menu ul li:hover ul li ul{display: none;}
.menu ul li ul{display: none;position: absolute;widht:160px;border:1px solid #000;}
.menu ul li ul li{float:none;width: 100%;position: relative;}
.menu ul li ul li:hover{background-color: #ccc;}
.menu ul li ul li:hover ul{display: block;}
.menu ul li ul li ul{display: none;position:absolute;left: 100%;top:0px;width:60px;}
.menu ul li ul li ul li{float:none;width: 100%;}
</style>
</head>
<body>
<div>
<div>
<div>
</div>
<div>
<form>
<inputtype="text">
<button><a href="">百度一下</a></button>
</form>
</div>
</div>
<div>
<ul>
<li><a href="">百度首页</a></li>
<li><a href="">消息</a></li>
<li><a href="">设置 ></a>
<ul>
<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>
<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>
</ul>
</li>
<li><a href="">admin ></a>
<ul>
<li><a href="">个人中心</a></li>
<li><a href="">帐号设置</a></li>
<li><a href="">意见反馈</a></li>
<li><a href="">退出</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div></div>
</body>
</html>
经过这个案例更加对导航菜单的层级定位position:absolute; position: absolute有更深刻的了解。
批改老师：灭绝师太批改时间：2018-11-30 09:10:28
老师总结：样式还可以在细致一点奥，不过知识点运用的还算到位，继续加油！
