<html><head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<style>
*{margin:0padding:0}
ul{list-style:none}
#nav{margin:0 autowidth:800pxheight:25pxbackground-color:#333}
#nav li{float:leftposition:relativeborder-right:1px solid #666}
#nav li span{display:inline-blockpadding-left:4pxcolor:#fff}
#nav li a{display:inline-blockpadding:0 15pxfont:12px/25px '宋体'color:#ffftext-decoration:none}
#nav li a:hover{background-color:#000}
#nav li ul{display:noneposition:absoluteleft:0top:25pxwidth:150pxbackground-color:#333}
#nav li ul li{float:noneborder-bottom:1px solid #666}
#nav li ul li a{display:block}
</style>
<script type="text/javascript">
$(function(){
$('#nav li').has('ul').find('a:first').append('<span>>></span>')
$('#nav li').hover(
function(){$(this).find('ul').stop(true,true).slideDown(300)},
function(){$(this).find('ul').stop(true,true).slideUp(300)})
})
</script>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li><a href="#">一级菜单3</a></li>
<li><a href="#">一级菜单4</a></li>
<li><a href="#">一级菜单5</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
</ul>
</div>
</body></html>
如果只是做鼠标经过弹出效果，鼠标离开就隐藏，可用:hover实现，给要弹出的部分加相对定位position:absolute给父级元素加position:relative如果想实现弹出鼠标离开不关闭可以用javascript或jquery来实现；
原理一样，都是要通过css来实现弹出后的定位，可以多看一下“position”属性
使用hover这个属性，hover就是鼠标经过，先给需要出现的下拉表给个display：none，这样下拉表就看不见了，用上hover以后再在里面给display：block；他就出现了。
