1：效果
2：代码
<script src="jquery.js"></script>
<style type="text/css">
.zhu>div>li {
width: 100px;
height: 30px;
font-size: 22px;
text-align: center;
border-radius: 2px;
list-style: none;
float: left;
margin-left: 20px;
background-color: red;
}
.zhu>div>li>div>ul>li {
width: 100px;
height: 30px;
font-size: 22px;
text-align: center;
border-radius: 2px;
list-style: none;
margin-left: -40px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<ul class="zhu">
<div class="menu1">
<li>
菜单一
<div class="zi1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</li>
</div>
<div class="menu2">
<li>
菜单二
<div class="zi2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</li>
</div>
<div class="menu3">
<li>
菜单三
<div class="zi3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</li>
</div>
<script type="text/javascript">
//写一个方法，来给每一个菜单写样式
function f1(id) {
$(function() {
$(".zhu .menu" + id + " li").hover(
function() {
$(".zi" + id + " ul li").css("display", "block");
$(this).css("background-color", "blue");
},
function() {
$(".zi" + id + " ul li").css("display", "none");
$(this).css("background-color", "red");
}
);
});
}
//调用方法来给每个主菜单设置样式（方法里的值是每个class名字的后缀）
f1("1");
f1("2");
f1("3");
</script>
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
