附加类到下拉菜单

我做了一个完美的使用纯CSS的下拉菜单。我想延迟显示指针在菜单上移动的下拉菜单，因为当您只是在屏幕上移动并且菜单不断弹出时它可能会令人讨厌！附加类到下拉菜单

我已经写了一些删除：hover类的jQuery，我试图在鼠标指针悬停在菜单上但没有任何事情发生时重新连接类。

任何人都可以告诉我哪里出错了吗？这里是我到目前为止的代码....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 
<style> 
BODY { 
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: 62.5%/1.3em Verdana, Geneva, Arial, Helvetica, sans-serif; BACKGROUND: url(/images/sr_bg.png) #fff repeat-y center top; COLOR: #000; PADDING-TOP: 0px 
} 
#headerWrapper { 
MARGIN: 0px 2px; WIDTH: 996px; BACKGROUND: url(../images/navBlackRight.png) no-repeat right top; HEIGHT: 34px 
} 
#main-nav { 
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 750px; PADDING-RIGHT: 0px; FONT: 1.4em Arial Narrow; FLOAT: left; PADDING-TOP: 0px 
} 
#main-nav UL { 
Z-INDEX: 89; POSITION: relative 
} 
#header-nav { 
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; CLEAR: both; PADDING-TOP: 0px 
} 
#header-nav LI { 
LIST-STYLE-TYPE: none; FLOAT: left; HEIGHT: 34px 
} 
#header-nav LI A.current { 
BACKGROUND-POSITION: 100% -34px 
} 
.nav-button { 
PADDING-BOTTOM: 0px; LINE-HEIGHT: 30px; PADDING-LEFT: 14px; PADDING-RIGHT: 14px; DISPLAY: block; BACKGROUND: url(../images/navBlack.png) no-repeat right top; HEIGHT: 34px; COLOR: #000; FONT-SIZE: 1.1em; FONT-WEIGHT: bold; TEXT-DECORATION: none; PADDING-TOP: 0px 
} 
.nav-button:visited { 
COLOR: #000 
} 
.nav-button:hover { 
COLOR: #000 
} 
.nav { 
Z-INDEX: 88; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; WIDTH: 995px; BACKGROUND: url(../images/dropdown.png) repeat-x; HEIGHT: 465px; BORDER-TOP: #ccc 1px solid; TOP: 32px; BORDER-RIGHT: #ccc 1px solid; LEFT: -9999px 
} 
#header-nav LI:hover .drop { 
POSITION: absolute; MARGIN-LEFT: 0%; LEFT: 0px 
} 
#header-nav LI UL { 
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 
} 
#header-nav LI LI { 
LIST-STYLE-TYPE: none; MARGIN: 0px; FLOAT: left; HEIGHT: 14px; CLEAR: left 
} 
#header-nav LI LI A { 
MARGIN: 4px; TEXT-DECORATION: none 
} 
.nav UL { 
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 
} 
.nav LI { 
LIST-STYLE-TYPE: none; MARGIN: 2px 0px; HEIGHT: 14px 
} 
.nav LI A { 
DISPLAY: block; HEIGHT: 14px; COLOR: #000; FONT-SIZE: 11px 
} 
.nav LI A:hover { 
COLOR: #fab400 
} 
.nav-col { 
WIDTH: 141px; FLOAT: left; HEIGHT: 464px 
} 
.nav-heading { 
POSITION: relative; TEXT-ALIGN: left; PADDING-LEFT: 8px; HEIGHT: 28px; TOP: 0px 
} 
.nav-heading A { 
COLOR: #000; TEXT-DECORATION: none 
} 
.nav-heading A:active { 
COLOR: #000 
} 
.nav-heading A:visited { 
COLOR: #000 
} 
.nav-heading H3 { 
MARGIN: 0px; FONT-SIZE: 1.1em 
} 
.nav-links { 
POSITION: relative; BORDER-LEFT: #ccc 1px solid; PADDING-LEFT: 3px; HEIGHT: 438px; TOP: 0px 
} 
.nav-links UL LI { 
TEXT-ALIGN: left; WIDTH: 100% 
} 
.nav-options { 
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-WEIGHT: bold; PADDING-TOP: 15px 
} 
#nav-body-armour .nav-links { 
TOP: 28px 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var $over = false; 
$('#header-nav li .nav').removeClass('drop'); 
$('#header-nav li').mouseover(function(){ 
    $over = true; 
    setTimeout(function(){ if ($over == true) $(this).children('.nav').addClass('drop'); }, 500); 
}); 
$('#header-nav li').mouseout(function(){ 
    $over = false; 
    setTimeout(function(){ if ($over == false) $(this).children('.nav').removeClass('drop'); }, 500); 
}); 
}); 
</script> 
</HEAD> 
<BODY id=indexHomeBody> 
<DIV id=mainWrapper><DIV id=headerWrapper> 
<DIV id=main-nav align=center> 
<UL id=header-nav> 
    <LI><A class=nav-button href="/Body-Armour">Body 
    Armour</A> 
    <DIV id=nav-body-armour class="nav drop"> 
    <DIV class=nav-col> 
    <DIV class=nav-links> 
    <UL> 
    <LI><A class=nav-all href="/Body-Armour">All 
    Body Armour</A></LI> 
    <LI class=nav-options>By Colour</LI> 
    <LI><A href="/Body-Armour?fltColour[]=Black" 
    rel=nofollow>Black</A></LI> 
    <LI><A 
    href="/Body-Armour?fltColour[]=Black%2FFuchsia" 
    rel=nofollow>Black/Fuchsia</A></LI> 
    <LI><A 
    href="/Body-Armour?fltColour[]=White%2FFuchsia" 
    rel=nofollow>White/Fuchsia</A></LI> 
    <LI class=nav-options>By Size</LI> 
    <LI><A 
    href="/Body-Armour?fltSize[]=Jr%2FX+Small" 
    rel=nofollow>Jr/X Small</A></LI> 
    <LI><A href="/Body-Armour?fltSize[]=Small" 
    rel=nofollow>Small</A></LI> 
    <LI><A 
    href="/Body-Armour?fltSize[]=Small%2FMedium" 
    rel=nofollow>Small/Medium</A></LI> 
    <LI><A href="/Body-Armour?fltSize[]=Medium" 
    rel=nofollow>Medium</A></LI> 
    <LI><A href="/Body-Armour?fltSize[]=Large" 
    rel=nofollow>Large</A></LI> 
    <LI><A href="/Body-Armour?fltSize[]=X-Large" 
    rel=nofollow>X-Large</A></LI> 
    <LI><A 
    href="/Body-Armour?fltSize[]=Large%2FX-Large" 
    rel=nofollow>Large/X-Large</A></LI> 
    </UL> 
    </DIV> 
    </DIV> 
    </DIV> 
    </LI> 
</UL> 
</DIV> 
</DIV> 
</DIV> 
</BODY></HTML>

来源

2011-06-04 damian

花更多时间阅读降价编辑器的帮助。如果你改进问题的格式，更多的人将能够阅读它，你将得到更好的答案。（提示：通过4个空格缩进代码来创建代码块。） – melhosseiny 2011-06-04 20:00:41

这并不直接回答你的问题，但它好像你可能会从hoverIntent()插件中受益。

来源

2011-06-04 20:13:01

附加类到下拉菜单

回答

相关问题