gif效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/baaf3b44afabd5fa80128449e932ea79.gif)
代码块
<head>
<meta charset="UTF-8">
<title></title>
<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");
}
);
});
}
f1("1");
f1("2");
f1("3");
</script>
</body>