为大家提供一种简易的菜单的制作方法，代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="">
<title></title>
</head>
<style>
body{margin: 0;padding: 0}
ul li{list-style-type:none;margin: 0px;padding: 0;text-align: right;}
ul{;padding: 0;background:#eeeeee;width: 90px;}
.mm{background:#252525;text-align: center;}
a{color: #ffffff}
.mm ul li a{color: blue}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".mm>a").click(function(){
var ulNode = $(this).next("ul");
//if(ulNode.css("display")=="none"){
// ulNode.css("display","block")
//}else{
// ulNode.css("display","none")
//}
//ulNode.toggle(0)
ulNode.slideToggle()
})
$(".dmm").hover(function() {
$(this).children("ul").slideDown();
},function(){
$(this).children("ul").slideUp();
})
})
</script>
<body>
<ul>
<li class="mm">
<a href="#">菜单1</a>
<ul>
<li><a href="http://turbo12138.iteye.com/blog/profile">子菜单1</a></li>
<li><a href="http://turbo12138.iteye.com/blog/profile">子菜单2</a></li>
</ul>
</li>
<li class="mm">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="mm">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
</ul>
<br>
<br>
<!--<ul>-->
<!--<li class="dmm">-->
<!--<a href="#">菜单1</a>-->
<!--<ul>-->
<!--<li><a href="#">子菜单1</a></li>-->
<!--<li><a href="#">子菜单2</a></li>-->
<!--</ul>-->
<!--</li>-->
<!--<li class="dmm">-->
<!--<a href="#">菜单2</a>-->
<!--<ul>-->
<!--<li><a href="#">子菜单1</a></li>-->
<!--<li><a href="#">子菜单2</a></li>-->
<!--</ul>-->
<!--</li>-->
<!--<li class="dmm">-->
<!--<a href="#">菜单3</a>-->
<!--<ul>-->
<!--<li><a href="#">子菜单1</a></li>-->
<!--<li><a href="#">子菜单2</a></li>-->
<!--</ul>-->
<!--</li>-->
<!--</ul>-->
</body>
</html>
时间： 2024-11-09 18:47:02