摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航栏</title> <link rel="stylesheet" type="text/css&quo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="shortcut icon" type="image/x-icon" href="">
<style type="text/css">
*{margin: 0px;padding: 0px;}
body{background: #ccc;margin: 40px;}
ul li{list-style: none;width: 100px;height: 40px;line-height: 40px;text-align: center;float: left; }
ul li a{text-decoration: none;}
ul li a:hover{text-decoration: underline;}
.clear{clear: both;}
.main{position: relative;}
.main_menu{width: 216px;height: 510px;background:#2B333B;padding-top: 15px;padding-bottom: 15px;
border-bottom-left-radius: 8px;border-top-left-radius: 8px;text-align: center;}
.menu{width: 216px;height: 60px;line-height: 60px;text-align: center;color:#AAADB1;}
.menu:hover{background: #6B7176}
.item{
position: absolute;
top: 0px;
display: none;
left: 216px;
background-color: #fcfcfc;
padding-left: 30px;
width: 640px;
padding-right: 30px;
height: 400px;
padding-top: 10px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 4px 4px 5px -1px #2B333B;}
.menu:hover .item{display: block; left:216px;}
</style>
<body>
<ul>
<li><a href="#main">首页</a></li>
<li><a href="#video">视频教程</a></li>
<li><a href="#community">社区问答</a></li>
<li><a href="#">编程词典</a></li>
<li><a href="">手册下载</a></li>
<li><a href="">工具下载</a></li>
<li><a href="">类库下载</a></li>
<li><a href="">特色课程</a></li>
<li><a href="">菜鸟课堂</a></li>
</ul>
<div class="clear"></div>
<div class="main">
<ul class="main_menu">
<li class="menu">
<div>PHP开发</div>
<div class="item">
php教程
php图文教程 php视频教程 php手册教程 php实战教程 其他机构教程 php原生手册 phpstudy工具使用视频教程
</div>
</li>
<li class="menu">前端开发</li>
<li class="menu">服务端开发</li>
<li class="menu">移动开发</li>
<li class="menu">移动开发</li>
<li class="menu">移动开发</li>
<li class="menu">移动开发</li>
<li class="menu">移动开发</li>
</ul>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-11-30 16:08:15
老师总结：清除浮动有多种方式,推荐使用伪元素
还有, 如果使父级区块包住浮动元素呢?
