<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style>
body,h3,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul li{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
border:1px solid red;
}
ul{
position: relative;
}
.menu{
width: 500px;
height: 500px;
position: absolute;
top:0;
left:202px;
border:1px solid green;
display: none;
}
.menu ul li{
float:left;
}
</style>
</head>
<body>
<ul>
<li class="title">
<h3>手机</h3>
<div class="menu">
<ul>
<li>华为</li>
<li>小米</li>
<li>锤子</li>
<li>oppo</li>
</ul>
</div>
</li>
<li class="title">
<h3>家用电器</h3>
<div class="menu">
<ul>
<li>手电筒</li>
<li>冰箱洗衣机</li>
<li>电视</li>
<li>缝纫机</li>
</ul>
</div>
</li>
</ul>
<script src="./jquery-1.8.3.min.js"></script>
<script>
// 首先给li绑定鼠标移入事件 mouseover
$('.title').mouseover(function(){
$(this).find('.menu').css('display','block');
})
// 鼠标移出事件 mouseout
$('.title').mouseout(function(){
$(this).find('.menu').css('display','none');
})
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style>
body,h3,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul li{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
border:1px solid red;
}
ul{
position: relative;
}
.menu{
width: 500px;
height: 500px;
position: absolute;
top:0;
left:202px;
border:1px solid green;
display: none;
}
.menu ul li{
float:left;
}
</style>
</head>
<body>
<ul>
<li class="title">
<h3>手机</h3>
<div class="menu">
<ul>
<li>华为</li>
<li>小米</li>
<li>锤子</li>
<li>oppo</li>
</ul>
</div>
</li>
<li class="title">
<h3>家用电器</h3>
<div class="menu">
<ul>
<li>手电筒</li>
<li>冰箱洗衣机</li>
<li>电视</li>
<li>缝纫机</li>
</ul>
</div>
</li>
</ul>
<script src="./jquery-1.8.3.min.js"></script>
<script>
// 首先给li绑定鼠标移入事件 mouseover
$('.title').mouseover(function(){
$(this).find('.menu').css('display','block');
})
// 鼠标移出事件 mouseout
$('.title').mouseout(function(){
$(this).find('.menu').css('display','none');
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
