*{
margin: 0;
padding: 0;
}
.nva{
width:800px ;
height: 40px;
margin:0 auto;
margin-top: 20px;
list-style-type: none;
border:1px solid gainsboro ;
background-color: whitesmoke;
}
.nva li{
float: left;
width: 80px;
text-align: center;
line-height: 40px;
background-color: whitesmoke;
color: #000000;
display: block;
}
.nva a{
text-decoration: none;
display: block;
}
.nva li:hover{
background-color: red;
color: white;
display: block;
cursor: pointer;
}
.nva li ol li{line-height:30px;font-size: 12px;}
ul,ol{list-style-type: none;}
.nva ol{display: none;}
.nva li:hover ol{display: block;cursor: pointer;}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/demo5.css" />
</head>
<body>
<ul class="nva">
<li herf="#">
<a href="#">推荐</a>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</li>
<li href="#"><a >新闻</a></li>
<li href="#"><a >国际</a></li>
<li href="#"><a >娱乐</a></li>
<li href="#"><a >视频</a></li>
<li href="#"><a >财经</a></li>
<li href="#"><a >体育</a></li>
<li href="#"><a >军事</a></li>
<li href="#"><a >汽车</a></li>
<li href="#"><a >房产</a></li>
</ul>
</body>
</html>