<!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" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<title>无标题文档</title>
</head>
<body>
<div id="menu">
<h1>菜单1</h1>
<ul class="show">
<li>菜单1.1</li>
<li>菜单1.2</li>
<li>菜单1.3</li>
</ul>
<h1>菜单2</h1>
<ul>
<li>菜单2.1</li>
<li>菜单2.2</li>
<li>菜单2.3</li>
</ul>
<h1>菜单3</h1>
<ul>
<li>菜单3.1</li>
<li>菜单3.2</li>
<li>菜单3.3</li>
</ul>
</div>
</body>
</html>
<script src="js/jQuery1.7.js"></script>
<script src="js/menu.js"></script>
@charset "utf-8";
/* CSS Document */
body{padding:0px;margin:0px; font-size:12px; font-family:"宋体"}
ul,ol,dl,dd,dt,h1,h2,h3,h4,p,span,form,input,tr,td{padding:0px; margin:0px;}
ul,ol{ list-style:none;}
img{border:none;}
a{ text-decoration:none; color:#333;}
.clear{ clear:both}
img,input{ vertical-align:middle;}
#menu{ width:300px; border:1px solid #09C; margin:100px auto;}
#menu h1{ height:25px; background:#ccc; color:#333; font-size:14px; font-weight:bolder; line-height:25px; text-align:center;cursor:pointer;}
#menu ul{ display:none;}
#menu .show{ display:block;}
#menu li{ height:20px; background:#999; color:#000; line-height:20px; text-align:center; }
#menu li.hover{ background:#0f0;}
$(document).ready(function(){
$("h1").bind("click",function(){
$("ul").hide();
$(this).next().slideDown(); });
$("li").bind("mouseover",function(){
$(this) .addClass("hover"); }).bind("mouseout",function(){
$(this).removeClass("hover");
});
});
浙公网安备 33010602011771号