<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>javascript
<style type="text/css">
#mymenu {
height: 30px;
width: 300px;
}
#mymenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}css
#mymenu ul li {
float: left;
width: 100px;
line-height: 30px;
text-align: center;
background-color: #3CC;
}
#mymenu ul li ul li {
background-color:#3CF;
}
#mymenu ul li ul{display: none}
</style>
<script src="jquery-1.7.js" type="text/javascript">
</script>
<script language="javascript">
$(function(){
//$("#mymenu ul li ul").css("display","none");
// $("#mymenu ul li").mouseover(function(){
// $(this).next("ul").slideDown(300); //建議用next不用children，由於後者是集合
// }
//);
//$("#mymenu ul li").mouseout(function(){
// $(this).next("ul").slideUp(300);
// }
// );
$("#mymenu ul li").hover(function(){
$(this).children("ul").slideDown(300);
//alert("你好")
},function(){
$(this).children("ul").slideUp(300);
});
});html
</script>
</head>java
<body>
<div id="mymenu">jquery
<ul>
<li>菜單1
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>菜單1</li>
<li>菜單1
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>ide
</div>
</body>
</html>ui