<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
div.nav{
line-height: 36px;
background-color: #333;
height:36px;
width:960px;
margin-right:auto;
margin-left:auto;
color:#fff;
z-index:-1;
}
div.nav a{
color:#999;
text-decoration: none;
display:block;
float:left;
text-align: center;
padding-right:5px;
padding-left:5px;
width:100px;
}
div.navul li ul li{
line-height:28px;
height:28px;
}
div.navul{
float:left;
list-style-type: none;
z-index:20;
}
div.navul li{
float:left;
margin-bottom: 5px;
/*min-width: 65px;*/
width:110px;
}
div.navul li a:hover{
color:#f90;
background-color: #ccc;
padding-right: 5px;
padding-left:5px;
}
.on{
background-color: #666;
}
div.navul li ul{
display: none;
}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<ul class="menulist">
<li id="n0"><a href="default.htm">首页</a></li>
<li ><a href="#">新闻</a>
<ul>
<li><a href="#">in</a></li>
<li><a href="#">out</a></li>
<li><a href="#">news</a></li>
</ul>
</li>
<li ><a href="#">信息</a>
<ul>
<li><a href="#">info</a></li>
<li><a href="#">education</a></li>
<li><a href="#">mobile</a></li>
</ul>
</li>
<li ><a href="#">社区</a>
<ul>
<li><a href="#">taobao</a></li>
<li><a href="#">amazon</a></li>
<li><a href="#">jd</a></li>
</ul>
</li>
</ul>
</div>
</div>
<scriptsrc="js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
menu();
});
function menu(){
$(".nav>ul>li:not(#n0)").hover(function(){
$(".nav>ul>li:not(#n0)").removeClass("on");
$(this).addClass("on");
$(this).find("ul").show();
},function(){
$(this).removeClass("on");
$(this).find("ul").hide();
})
}
</script>
</body>
</html>。