<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉式菜单</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}/*去掉默认边距*/
#menu{background: #eee;
width: 600px;
height: 40px;
margin: 0 auto;
margin-top:100px;
}
ul{ list-style: none;
}
ul li{line-height: 40px;
float: left;
text-align: center;
position: relative;/* 与下面对的position：absolute;对应*/
}
a{text-decoration: none;display: block; padding: 0 10px; height: 40px;}
a:hover{color: yellow;
background: black;
}
ul li ul li{
float: none;
background: #eee;
margin-top: 2px;
}
ul li ul li a{ width: 80px;}
ul li ul{
position: absolute;
left: 0;
top: 40px; /*与上面的positon:relative;结合使用实现一级菜单的大小不随二级菜单大小而改变 */
display: none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".submenu").mouseover(function(){
$(this).children("ul").show();
})
$(".submenu").mouseout(function(){
$(this).children("ul").hide();
})
})
</script>
</head>
<body>
<div id ="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="submenu"><a href="#" >最新1</a><!-- 这里要使用class，因为同名class可用多次，而一个id名只能使用一次-->
<ul>
<li><a href="#">首页你好</a></li><!--Google 如果这个a标签不设置大小会默认和一级菜单一样宽-->
<li><a href="#">最新</a>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
</ul>
</li>
<li class="submenu"><a href="#">最新2</a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
</ul></li>
<li class="submenu"><a href="#">最新3</a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
</ul></li>
<li class="submenu"><a href="#">最新4</a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
<li><a href="#">首页</a></li>
<li><a href="#">最新</a>
</ul></li>
</ul>
</div>
</body>
</html>
