Attach class to dropdown menu
I've made a dropdown menu that works perfectly using pure css. I'd like to delay the dropdown showing when the pointer moves over the menu because it can be annoying when you're just moving around the screen and the menu keeps popping up!
I've written some jQuery that removes the :hover class and I'm trying to reattach the class when the mouse pointer is hovered over the menu but nothing is happening.
Can anyone tell me where I'm going wrong? Here is the code I have so far....
<!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>
This doesn't answer your question directly but it seems like you might benefit from the hoverIntent() plugin.
加载中,请稍侯......
精彩评论