摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 960px;
height: 40px;
margin: 50px auto;
}
.nav ul{
list-style: none;
}
.nav ul li{
float: left;
width: 120px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: yellowgreen;
position: relative;
}
.nav ul li a{
text-decoration: none;
color: white;
}
.nav ul li .dropbox{
position: absolute;
top: 40px;
left: 0;
width: 180px;
display: none;
padding-top: 10px;
}
.nav ul li .dropbox .inner{
background-color: #ccc;
}
.nav ul li .dropbox a{
display: block;
line-height: 30px;
height: 30px;
text-align: left;
}
.nav ul li .dropbox a:hover{
background-color: pink;
}
.news:hover .dropbox{
display: block;
}
.cai:hover .dropbox{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">栏目名称</a></li>
<li class="news">
<a href="#">公司新闻</a>
<div class="dropbox">
<div class="inner">
<p><a href="">北京总部新闻</a></p>
<p><a href="">上海分公司新闻</a></p>
<p><a href="">东莞分公司新闻</a></p>
<p><a href="">辽宁分公司新闻</a></p>
</div>
</div>
</li>
<li class="cai">
<a href="#">公司财务</a>
<div class="dropbox">
<div class="inner">
<p><a href="">2011财务</a></p>
<p><a href="">2012财务</a></p>
<p><a href="">2013财务</a></p>
<p><a href="">2014财务</a></p>
<p><a href="">2015财务</a></p>
<p><a href="">2016财务</a></p>
</div>
</div>
</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>
</body>
</html> 自己理解：导航菜单都差不多，用ul li 浮动完成，再加上伪类，来做鼠标放上样式，切记div要清除浮动
批改老师：天蓬老师批改时间：2019-01-24 08:52:09
老师总结：这类菜单 的重点, 就在于事件 , 与绝对定位, 关键代码与原理掌握就好写了
