小白jquery横向菜单弹出菜单制作
<!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>
<style type="text/css">
#mymenu {
height: 30px;
width: 300px;
}
#mymenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#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);
});
});
</script>
</head>
<body>
<div >
<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>
</div>
</body>
</html>