摘要：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/f
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
*{margin: 0px;padding: 0px;}
.clear{clear: both;}
.top-bar{width: 100%;background: #000;text-align: center;}
.bar-left {float: left;}
.bar-left i{color: #FFFFFF;}
.bar-left ul li{float: left;list-style: none;font-size: 10px;width: 70px;line-height: 40px;color:#C3C5C6;}
.bar-left li:hover{color: #FFFFFF;border-bottom:2px solid #87CEEB;}
.bar-right{float: right;}
.bar-right ul li{float: left;line-height: 40px;width: 30px;}
.bar-right i{color: #FFFFFF;}
.mess:hover{background: #363C41 ;}
.bar-left li:hover i{transform: rotateX(180deg);}
.dic{position: relative;}
.dic ul{display: none;position: absolute;text-align: center;width: 140px;margin-top: 2px;border:1px solid #CCCCCC;}
.dic ul li{height: 30px;line-height: 30px;}
.dic:hover ul{display: block;border-top: none;}
.dic ul li:hover{color: #000000;background: #CCCCCC;border-bottom:none;}
</style>
<body>
<div class="top-bar">
<div class="bar-left">
<ul>
<li>首页</li>
<li>视频教程</li>
<li>社区问答</li>
<li class="dic">编程字典 <i class="fa fa-sort-desc"></i>
<ul>
<li>PHP词典</li>
<li>技术文章</li>
<li>jquery词典</li>
<li>PHP教程</li>
<li>HTML词典</li>
<li>小程序开发</li>
</ul>
</li>
<li>手册下载</li>
<li>工具下载</li>
<li>类库下载</li>
<li>菜鸟学堂</li>
</ul>
</div>
<div class="bar-right">
<ul>
<li class="mess"><i class="fa fa-envelope-open-o"></i></li>
<li><i class="fa fa-user-circle-o"></i></li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
关键部分 定位 大导航相对于本身位置 relative 下拉小导航相对于父级位置 绝对定位 absolute
