下拉菜单隐藏菜单
Drop down menu hiding menus
我正在为一个项目构建一个下拉菜单，但我没有让它完全正常工作。我希望它能显示子菜单，当我悬停在根级菜单，然后关闭一个短暂的延迟后，当菜单或子菜单不再悬停。大部分都是有效的;当根级项目悬停时，子菜单显示，当我停止悬停根级项目时，子菜单隐藏。问题是，当我将光标从根级项移动到子菜单项而不是第一个并将其悬停时，子菜单也会隐藏。这显然是不好的，所以希望得到帮助。
我用代码创建了一个JSFiddle，它可以更清楚地显示问题。
下面是我的代码:menu.htm
<div id=m_wrapper>
<ul id=menu>
<li onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">Item 1
<div id=s0 onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">
<a href=#>Item 1.1</a>
<a href=#>Item 1.2</a>
<a href=#>Item 1.3</a>
</div>
</li>
</ul>
</div>
menu.css
#m_wrapper {
position:relative;
display:table;
}
#menu {
position:relative;
}
#menu li {
width:100px;
position:relative;
float:left;
list-style-type:none;
}
#menu div {
position:absolute;
visibility:hidden;
display:inherit;
width:100%;
z-index:30
}
#menu div a {
position:relative;
display:block;
z-index:35;
}
menu.js
var countdown = 300;
var timer = null;
var menu_item = null;
window.show_sub_menu = function(cath) {
if (menu_item) {
menu_item.style.visibility = 'hidden'; //Make sure to show one menu at a time
}
menu_item = window.document.getElementById("s" + cath);
menu_item.style.visibility = 'visible'; //Show menu
if (timer) {
window.clearTimeout(timer); //Reset timer, so menu is kept open
timer = null;
}
};
window.start_timer = function() {
timer = window.setTimeout(close_sub_menu, countdown);
};
window.close_sub_menu = function() {
menu_item.style.visibility = 'hidden';
};
你不必把它弄得那么复杂。
当然你也可以用javascript做同样的事情，但是看看用jQuery是多么容易，可读和简单。
查看这个DEMO
只需使用下面的脚本
$('#menu li').hover(
function(){
$(this).stop().animate({height: '100px'},1000,function(){});
$(this).find('div').show(600);
}//gets called upon mousehover
,
function(){
$(this).stop().animate({height: '20px'},1000,function(){});
} //gets called upon mouseout
); //hover ends
还有，我不知道你为什么写了这么多CSS。就用这些:
#menu
{
list-style:none;
}
#menu li
{
width:100px;
border:1px Solid #CCC;
text-align:Center;
cursor:pointer;
height:20px;
overflow:hidden;
}
#menu li div
{
border:1px Solid #CCC;
}
#s0
{
height:auto;
}
#s0 a
{
display:block;
}
你可以通过它做很多事情，比如选择下拉项目。通过箭头键进行选择。
首先，你应该避免在<li>标签中使用<div>，因为这不是语义。
相当好是多层菜单构建只有html和css样式。