想做一个和联想官网一样的导航菜单,鼠标移到大栏目后出现相应的字栏目,这个已经实现了,遇到的问题是鼠标移开后关闭字栏目,不知道怎么做,请教各位大侠了<style type="text/css">
.nav{background:url(../images/nav_bj.gif) no-repeat;height:36px;width:930px;line-height:26px;color:#FFF;padding-left:20px;}
.nav div{display:none;}
.nav li{float:left;padding:0 20px 0 20px;margin:0 5px 0 5px;}
.nav .liOn{background:url(images/nav_bj2.jpg) no-repeat;}
.nav .liOn a{color:#4D678A;}
.nav .liOn a:hover{color:#4D678A}
.nav .imeaOn{padding-left:10px;}
.nav li a{color:#FFF;font-weight:bold;line-height:36px;display:block;}
.nav li a:hover{color:#BBCDDB;}
#navList{position:relative;z-index:999999;height:auto;width:930px;}
#navList .imsc{position:absolute;background:url(images/nav_bj3.jpg) repeat-x #C9D3E2;left:0px;height:auto;width:930px;color:#314157; clear:none;
top:0px;
padding:10px 0 20px;display:none;}
#navList .imsc a{color:#314157;line-height:20px;}
#navList .imsc h1{padding:0px;margin:0px;}
#navList .imsc ul{float:left;list-style:none;margin:0 5px 0 5px;padding:0 30px 0 10px;}
#navList .imsc .line{background:url(images/nav_lin.jpg) repeat-y right;}
#navList .imsc li{line-height:20px;float:none;list-style:none;}
#navList .imsc li a{font-weight:normal;}
#navList .imsc li a:hover{background:#314157;color:#FFF;}
</style>
<script type="text/javascript">
jQuery(function(){
$("#navTab a").each(function(){
$(this).mouseover(function(){
$("#navTab li").removeClass("liOn");
$(this).parent().addClass("liOn");
var id=$(this).attr("id");
$(".imsc").hide();
$("#Con"+id).show();
});
})
});
</script>
<div class="nav" id="navTab">
<li><a href="#" id="1">服务器存储器</a></li>
<li><a href="#" id="2">笔记本电脑</a></li>
<li><a href="#" id="3">台式机</a></li>
<li><a href="#" id="4">服务中心</a></li>
<li><a href="#" id="5">解决方案</a></li>
<li><a href="#" id="6">技术资料</a></li>
<li><a href="#" id="7">浏览全部</a></li>
</div>
<div class="nav_f" id="navList">
<div class="imsc" id="Con1">
<ul class="line">
<h1>戴尔塔式服务器</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
<ul>
<h1>戴尔机架服务器</h1>
<li><a href="#">DELL PowerEdge</a></li>
</ul>
</div>
<div class="imsc" id="Con2">
<ul class="line">
<h1>笔记本电脑</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
<ul>
<h1>笔记本电脑</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
</div>
</div>
.nav{background:url(../images/nav_bj.gif) no-repeat;height:36px;width:930px;line-height:26px;color:#FFF;padding-left:20px;}
.nav div{display:none;}
.nav li{float:left;padding:0 20px 0 20px;margin:0 5px 0 5px;}
.nav .liOn{background:url(images/nav_bj2.jpg) no-repeat;}
.nav .liOn a{color:#4D678A;}
.nav .liOn a:hover{color:#4D678A}
.nav .imeaOn{padding-left:10px;}
.nav li a{color:#FFF;font-weight:bold;line-height:36px;display:block;}
.nav li a:hover{color:#BBCDDB;}
#navList{position:relative;z-index:999999;height:auto;width:930px;}
#navList .imsc{position:absolute;background:url(images/nav_bj3.jpg) repeat-x #C9D3E2;left:0px;height:auto;width:930px;color:#314157; clear:none;
top:0px;
padding:10px 0 20px;display:none;}
#navList .imsc a{color:#314157;line-height:20px;}
#navList .imsc h1{padding:0px;margin:0px;}
#navList .imsc ul{float:left;list-style:none;margin:0 5px 0 5px;padding:0 30px 0 10px;}
#navList .imsc .line{background:url(images/nav_lin.jpg) repeat-y right;}
#navList .imsc li{line-height:20px;float:none;list-style:none;}
#navList .imsc li a{font-weight:normal;}
#navList .imsc li a:hover{background:#314157;color:#FFF;}
</style>
<script type="text/javascript">
jQuery(function(){
$("#navTab a").each(function(){
$(this).mouseover(function(){
$("#navTab li").removeClass("liOn");
$(this).parent().addClass("liOn");
var id=$(this).attr("id");
$(".imsc").hide();
$("#Con"+id).show();
});
})
});
</script>
<div class="nav" id="navTab">
<li><a href="#" id="1">服务器存储器</a></li>
<li><a href="#" id="2">笔记本电脑</a></li>
<li><a href="#" id="3">台式机</a></li>
<li><a href="#" id="4">服务中心</a></li>
<li><a href="#" id="5">解决方案</a></li>
<li><a href="#" id="6">技术资料</a></li>
<li><a href="#" id="7">浏览全部</a></li>
</div>
<div class="nav_f" id="navList">
<div class="imsc" id="Con1">
<ul class="line">
<h1>戴尔塔式服务器</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
<ul>
<h1>戴尔机架服务器</h1>
<li><a href="#">DELL PowerEdge</a></li>
</ul>
</div>
<div class="imsc" id="Con2">
<ul class="line">
<h1>笔记本电脑</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
<ul>
<h1>笔记本电脑</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
</div>
</div>
jQuery(function(){
$("#navTab a").each(function(){
$(this).mouseover(function(){
$("#navTab li").removeClass("liOn");
$(this).parent().addClass("liOn");
var id=$(this).attr("id");
$(".imsc").hide();
$("#Con"+id).show();
});
})
});
这段代码貌似没有问题。用Firefox看看
if (event.target.id != "navList")
{
$(".imsc").hide();
}
});
可惜我不会 %>_<%
因为我新手~~~~~
想蹭点分 O(∩_∩)O~~~
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>导航</title>
<link rel="stylesheet" href="style/style.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
.nav{background:url(../images/nav_bj.gif) no-repeat #999;height:36px;width:930px;line-height:26px;color:#FFF;padding-left:20px;}
.nav div{display:none;}
.nav li{float:left;padding:0 20px 0 20px;margin:0 5px 0 5px;}
.nav .liOn{background:url(images/nav_bj2.jpg) no-repeat;}
.nav .liOn a{color:#4D678A;}
.nav .liOn a:hover{color:#4D678A}
.nav .imeaOn{padding-left:10px;}
.nav li a{color:#FFF;font-weight:bold;line-height:36px;display:block;}
.nav li a:hover{color:#BBCDDB;}
#navList{position:relative;z-index:999999;height:auto;width:930px;}
#navList .imsc{position:absolute;background:url(images/nav_bj3.jpg) repeat-x #C9D3E2;left:0px;height:auto;width:930px;color:#314157; clear:none;
top:0px;
padding:10px 0 20px;display:none;}
#navList .imsc a{color:#314157;line-height:20px;}
#navList .imsc h1{padding:0px;margin:0px;}
#navList .imsc ul{float:left;list-style:none;margin:0 5px 0 5px;padding:0 30px 0 10px;}
#navList .imsc .line{background:url(images/nav_lin.jpg) repeat-y right;}
#navList .imsc li{line-height:20px;float:none;list-style:none;}
#navList .imsc li a{font-weight:normal;}
#navList .imsc li a:hover{background:#314157;color:#FFF;}
</style>
<script type="text/javascript">
jQuery(function(){
$("#navTab a").each(function(){
$(this).mouseover(function(){
$("#navTab li").removeClass("liOn");
$(this).parent().addClass("liOn");
var id=$(this).attr("id");
$(".imsc").hide();
$("#Con"+id).show();
});
$(".imsc").mouseover(function(){
$(this).show();
}).mouseout(function(){
$(this).hide();
})
})
});
</script>
<div class="nav" id="navTab">
<li><a href="#" id="1">服务器存储器</a></li>
<li><a href="#" id="2">笔记本电脑</a></li>
<li><a href="#" id="3">台式机</a></li>
<li><a href="#" id="4">服务中心</a></li>
<li><a href="#" id="5">解决方案</a></li>
<li><a href="#" id="6">技术资料</a></li>
<li><a href="#" id="7">浏览全部</a></li>
</div>
<div class="nav_f" id="navList">
<div class="imsc" id="Con1">
<ul class="line">
<h1>戴尔塔式服务器</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
<ul>
<h1>戴尔机架服务器</h1>
<li><a href="#">DELL PowerEdge</a></li>
</ul>
</div>
<div class="imsc" id="Con2">
<ul class="line">
<h1>笔记本电脑</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
<ul>
<h1>笔记本电脑</h1>
<li><a href="#">DELL PowerEdge R410 1U</a></li>
</ul>
</div>
</div>
</body>
</html>
终于解决了。