<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
.clearfix:after{
content:"";
display:block;
clear:both;
visibility: hidden;
height:0;
}
.clearfix{
zoom:1;
}
.nav{
600px;
border:1px solid red;
margin:0 auto;
}
.nav li{
float:left;
line-height: 3;
100px;
text-align: center;
background:orange;
color:white;
}
.list{
display: none;
}
.nav li:hover .list{
display:block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="clearfix">
<li>
首页
<ul class="list">
<li>天猫</li>
<li>淘宝</li>
<li>京东</li>
<li>搜狗</li>
</ul>
</li>
<li>
新闻
<ul class="list">
<li>游戏</li>
<li>动漫</li>
<li>视频</li>
<li>运动</li>
</ul>
</li>
<li>
娱乐
<ul class="list">
<li>王者</li>
<li>吃鸡</li>
<li>飞车</li>
<li>穿越</li>
</ul>
</li>
<li>
音乐
<ul class="list">
<li>用品</li>
<li>漫画</li>
<li>小说</li>
<li>美团</li>
</ul>
</li>
<li>
军事
<ul class="list">
<li>顺丰</li>
<li>菜鸟</li>
<li>迅雷</li>
<li>百度</li>
</ul>
</li>
<li>
体育
<ul class="list">
<li>黑执事</li>
<li>罪恶王冠</li>
<li>海贼王</li>
<li>火影</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果图{
}