<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#666;
}
ul{
-webkit-padding-start: 0;
}
.ul{
text-align: center;
width:800px;
margin:0 auto;
background:#3fd5d7;
font-size:0;
}
.ul>li{
display:inline-block;
position: relative;
}
.ul>li>a{
text-decoration: none;
padding:15px 30px;
display:block;
color:#fff;
transition: all .5s;
font-size:14px;
}
.active{
background:#d13c1e;
}
.activea{
background:#d13c1e;
}
.xiala{
position: absolute;
width:100%;
background:#1e94d1;
display:none;
}
.xiala>li{
list-style: none;
}
.xiala>li>a{
display:block;
padding:8px 0;
text-decoration: none;
color:#fff;
font-size:14px;
}
</style>
</head>
<body>
<ul class="ul">
<li>
<a href="#" class="activea">首页</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#">新闻中心</a>
<ul class="xiala">
<li>
<a href="#">项目一</a>
</li>
<li>
<a href="#">项目二</a>
</li>
<li>
<a href="#">项目三</a>
</li>
<li>
<a href="#">项目四</a>
</li>
<li>
<a href="#">项目五</a>
</li>
</ul>
</li>
<li>
<a href="#">最新动态</a>
<ul class="xiala">
<li>
<a href="#">动态一</a>
</li>
<li>
<a href="#">动态二</a>
</li>
<li>
<a href="#">动态三</a>
</li>
</ul>
</li>
<li>
<a href="#">案例展示</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.ul>li').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
})
$('.ul>li>a').click(function(){
$(this).parent().siblings().children().removeClass('activea');
$(this).addClass('activea');
})
$('.ul>li').hover(function(){
$(this).find('.xiala').fadeToggle(400);
})
$('.xiala>li>a').hover(function(){
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})
</script>
</body>
</html>
jquery-鼠标经过导航条,显示二级下拉菜单
猜你喜欢
转载自blog.csdn.net/weixin_40002964/article/details/88103565
今日推荐
周排行