jquery实现下拉二级菜单的问题
首先我的问题是:当鼠标移到导航项时候,二级下拉菜单会出来,可是当鼠标移到二级下拉菜单的时候,它却收回了,这样就达不到在二级下拉菜单上做链接了,我贴出主要代码<ulid="...
首先我的问题是:当鼠标移到导航项时候,二级下拉菜单会出来,可是当鼠标移到二级下拉菜单的时候,它却收回了,这样就达不到在二级下拉菜单上做链接了,我贴出主要代码
<ul id="navf">
<li class="menuf"><a href="index.php">网站主页</a>
<ul class="submenu">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
</ul>
</li>
<li class="menuf"><a href="teach.php">教学目标</a>
<ul class="submenu">
<li><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
</ul>
</li>
</ul>
css为
#main .nav .menu ul li{ //首级栏目CSS
float:left;
padding-left:22px;
padding-right:22px;
text-align:center;
font-size:14px;
font-family:'微软雅黑';
position:relative;
display:block;
}
#main .nav ul.submenu{ //二级栏目CSS
position:absolute;
left:2px;
top:20px;
background:#f7f7f7;
border:1px solid #eeecec;
padding-top:0px;
opacity:0.9;
-moz-opacity:0.9;
filter:alpha(opacity=90);
padding-right:0px;
display:none;
}
Jquery 代码
$(document).ready(function(){
$("li.menuf").hover(function(){
var obj=$(this);
dt=setTimeout(function(){
obj.find("ul").slideDown();},500);
},function(){
var obj=$(this);
obj.find("ul").hide(500);
clearTimeout(dt);
});
});
最后,问题我再重述一次,当鼠标移到 ”网站主页“ 的时候 二级栏目会出来,但是当我把鼠标移到二级栏目上时,二级栏目又消失了,我想要的是 鼠标在二级栏目上时,二级栏目并不会消失,这样才可以点二级栏目上的链接 展开
<ul id="navf">
<li class="menuf"><a href="index.php">网站主页</a>
<ul class="submenu">
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
</ul>
</li>
<li class="menuf"><a href="teach.php">教学目标</a>
<ul class="submenu">
<li><a href="#">3333</a></li>
<li><a href="#">4444</a></li>
</ul>
</li>
</ul>
css为
#main .nav .menu ul li{ //首级栏目CSS
float:left;
padding-left:22px;
padding-right:22px;
text-align:center;
font-size:14px;
font-family:'微软雅黑';
position:relative;
display:block;
}
#main .nav ul.submenu{ //二级栏目CSS
position:absolute;
left:2px;
top:20px;
background:#f7f7f7;
border:1px solid #eeecec;
padding-top:0px;
opacity:0.9;
-moz-opacity:0.9;
filter:alpha(opacity=90);
padding-right:0px;
display:none;
}
Jquery 代码
$(document).ready(function(){
$("li.menuf").hover(function(){
var obj=$(this);
dt=setTimeout(function(){
obj.find("ul").slideDown();},500);
},function(){
var obj=$(this);
obj.find("ul").hide(500);
clearTimeout(dt);
});
});
最后,问题我再重述一次,当鼠标移到 ”网站主页“ 的时候 二级栏目会出来,但是当我把鼠标移到二级栏目上时,二级栏目又消失了,我想要的是 鼠标在二级栏目上时,二级栏目并不会消失,这样才可以点二级栏目上的链接 展开
2个回答
展开全部
你给 li 加一个class 同时也调用.hover 要不然你鼠标离开 一级栏目的时候就不触发 hover事件了 所以就没有2级栏目 了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2010-09-04
展开全部
这里有一个下拉菜单
你可以试试
里面有教程和源码
你可以试试
里面有教程和源码
参考资料: http://www.blueidea.com/common/shoutbox/redir.asp?7=y&id=11931
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询