摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> *{ margin: 0px; paddi
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#oDiv{
width:360px;
border: 10px solid #ccc;
border-radius: 15px;
margin: 20px auto;
}
#oDiv div{
width: 340px;
border: 1px solid red;
text-align: center;
margin :5px auto;
}
#oDiv div ul{
list-style: none;
width: 330px;
margin: 0 auto;
display: none;
}
#oDiv div ul li{
width: 330px;
background-color: #333;
margin: 5px auto;
}
#oDiv div:hover ul{
display: block;
}
</style>
</head>
<body>
<div id="oDiv">
<div>第一个div
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>第二个
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>第三个
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>第四个
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>diwu个
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>第六个
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>在导航后面添加列表项，然后把列表隐藏，当移动到其元素上，用伪元素让其显示。横列导航时设置定位，防止后面的部分变动。
批改老师：天蓬老师批改时间：2018-12-30 13:40:31
老师总结：我看你没有用到绝对定位, 能做出这个效果,不简单, 实际工作中,这类菜单 ,还是用定位做多一些
