先上测试地址http://4.lanjianwc.sinaapp.com/
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
</script>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
body{
margin: 0px;
font-family: "Microsoft YaHei";
background-color: #323232;
}
.nav{
background-color: rgb(97,197,258);
height: 56px;
border-bottom: 4px solid #2d93d4;
transition:height 0.4s;
-moz-transition:height 0.4s;
-webkit-transition:height 0.4s;
-o-transition:height 0.4s;
/*菜单展开动画*/
}
.nav ul{
list-style: none;
margin: 0px;
float: left;
}
.nav li{
padding-left: 20px;
padding-top: 20px;
text-decoration: none;
}
.nav li a{
text-decoration: none;
color: #fff;
}
.nav:hover{
height: 260px;
background-color: #2d93d4;
}
.close{
display: none;
}
.close li{
font-size: 14px;
}
.open{
display: inherit;
}
.open li{
font-size: 14px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="1">官网首页</a></li>
<div class="open">
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</div>
</ul>
<ul>
<li><a href="1">产品介绍</a></li>
<div class="open">
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="6">联系我们</a></li>
</div>
</ul>
<ul>
<li><a href="1">服务介绍</a></li>
<div class="open">
<li><a href="2">产品介绍</a></li>
<li><a href="6">联系我们</a></li>
</div>
</ul>
<ul>
<li><a href="1">技术支持</a></li>
<div class="open">
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</div>
</ul>
<ul>
<li><a href="1">立即购买</a></li>
<div class="open">
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
</div>
</ul>
<ul>
<li><a href="1">联系我们</a></li>
<div class="open">
<li><a href="2">产品介绍</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</div>
</ul>
</div>
<script type="text/javascript">
$(".open").hide();
// 将子菜单隐藏
$(".nav").mouseover(function(){
$(".open").show(300);
})
// 鼠标经过显示
$(".nav").mouseleave(function(){
$(".open").hide(300);
})
// 鼠标移出移除
</script>
</body>
仅用了显示show()和隐藏hide()两个方法，当鼠标移动到菜单栏时显示子菜单，移出时再把它隐藏
时间： 2024-10-13 19:28:56