<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jUqery实现网站二级菜单</title>
<style type="text/css">
ul{margin:0;padding:0;list-style-type:none;}
a,a:hover{text-decoration:none;}
.mold_open_hover,.mold_open{display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}
.mold_open{background-position:0 -6px;}
.mold_open_hover{background-position:0 0;}
.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}
.menu-cont-list a:hover{text-decoration:underline;}
.mod-menu .menu-item{width:220px;border-bottom:1px solid #dcdcdc;position:relative;z-index:22;}
.mod-menu .menu-item li{height:47px;line-height:47px;background:#e9e9e9;border-top:1px solid #dcdcdc;}
.mod-menu .menu-item li.mouse-bg{background-color:#fff;position:relative;z-index:22;margin-right:-4px;}
.mod-menu .menu-item a{color:#656565;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}
.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:1px solid #dcdcdc;z-index:20;}
.mod-menu .menu-cont-list{padding:0 30px;}
.mod-menu .menu-cont-list li{border-bottom:1px solid #dcdcdc;padding:10px 0;}
.mod-menu .menu-cont-list li:last-child{border-bottom:none;}
.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}
.mod-menu .menu-cont-list h3 a{color:#656565;}
.mod-menu .menu-list-link a{color:#666;line-height:24px;}
.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}
</style>
</head>
<body>
<div class="mod-menu">
<ul class="menu-item">
<li><a href="">Wedding</a></li>
<li><a href="">Occasion Dresses</a></li>
<li><a href="">Women's Clothing</a></li>
</ul>
<div class="menu-cont" style="display:none;top:241px;">
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="">Wedding Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="">Wedding Dresses</a></h3>
<div class="menu-list-link">
<a href="">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a href="">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a href="">Wedding Guest Dresses</a>
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="">Wedding Dresses</a></h3>
<div class="menu-list-link">
<a href="">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a href="">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a href="">Wedding Guest Dresses</a>
</div>
</li>
<li>
<h3><a href="">Prom Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="">Prom Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="">Prom Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var mod_menu = $(".mod-menu");
var menu = function() {
var menuItem = $(".menu-item li");
menuItem.each(function() {
var _index = $(this).index();
$(this).mouseenter(function() {
var y = $(this).position().top + 1;
$(".menu-cont").show();
$(".menu-cont").css("top", y);
$(this).addClass("mouse-bg").siblings().removeClass("mouse-bg");
$(".menu-cont>div").eq(_index).show().siblings().hide();
});
});
$(".mod-menu").mouseleave(function() {
$(".menu-cont").hide();
menuItem.removeClass("mouse-bg");
})
}
menu();
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>jUqery实现网站二级菜单</title>
<style type="text/css">
ul{margin:0;padding:0;list-style-type:none;}
a,a:hover{text-decoration:none;}
.mold_open_hover,.mold_open{display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}
.mold_open{background-position:0 -6px;}
.mold_open_hover{background-position:0 0;}
.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}
.menu-cont-list a:hover{text-decoration:underline;}
.mod-menu .menu-item{width:220px;border-bottom:1px solid #dcdcdc;position:relative;z-index:22;}
.mod-menu .menu-item li{height:47px;line-height:47px;background:#e9e9e9;border-top:1px solid #dcdcdc;}
.mod-menu .menu-item li.mouse-bg{background-color:#fff;position:relative;z-index:22;margin-right:-4px;}
.mod-menu .menu-item a{color:#656565;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}
.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:1px solid #dcdcdc;z-index:20;}
.mod-menu .menu-cont-list{padding:0 30px;}
.mod-menu .menu-cont-list li{border-bottom:1px solid #dcdcdc;padding:10px 0;}
.mod-menu .menu-cont-list li:last-child{border-bottom:none;}
.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}
.mod-menu .menu-cont-list h3 a{color:#656565;}
.mod-menu .menu-list-link a{color:#666;line-height:24px;}
.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}
</style>
</head>
<body>
<div class="mod-menu">
<ul class="menu-item">
<li><a href="">Wedding</a></li>
<li><a href="">Occasion Dresses</a></li>
<li><a href="">Women's Clothing</a></li>
</ul>
<div class="menu-cont" style="display:none;top:241px;">
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="">Wedding Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="">Wedding Dresses</a></h3>
<div class="menu-list-link">
<a href="">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a href="">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a href="">Wedding Guest Dresses</a>
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="">Wedding Dresses</a></h3>
<div class="menu-list-link">
<a href="">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a href="">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a href="">Wedding Guest Dresses</a>
</div>
</li>
<li>
<h3><a href="">Prom Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display:none;">
<ul>
<li>
<h3><a href="">Prom Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="">Prom Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var mod_menu = $(".mod-menu");
var menu = function() {
var menuItem = $(".menu-item li");
menuItem.each(function() {
var _index = $(this).index();
$(this).mouseenter(function() {
var y = $(this).position().top + 1;
$(".menu-cont").show();
$(".menu-cont").css("top", y);
$(this).addClass("mouse-bg").siblings().removeClass("mouse-bg");
$(".menu-cont>div").eq(_index).show().siblings().hide();
});
});
$(".mod-menu").mouseleave(function() {
$(".menu-cont").hide();
menuItem.removeClass("mouse-bg");
})
}
menu();
});
</script>
</body>
</html>
6521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
