Hi folks,
I am encountering an odd behavior using jQuery to show/hide a menu.
I have an absolutely positioned div which contains an "activator " div (relatively positioned) which I want to reveal a menu on moseover. Menu div is contained by
the activator div and is also relatively positioned. I was working on assumption that since it would be contained by
the activator that rolloff would not be triggered when
the mouse travels over into
the reveled menu. When you roll onto
the revealed menu however show/hide starts pulsing and does so a second or so even after
the mouse clears
the area.
CSS looks like this
#myAbsolutePos {
position:absolute;
height:335px;
width:213px;
top:508px;
left:0;
z-index:2;
}
#activator {
position:relative;
height:35px;
margin-top:95px;
text-align:center;
width:inherit;
cursor:pointer;
}
#menu {
position:relative;
height:255px;
width:243px;
top:-45px;
left:190px;
padding:20px 25px 20px 25px;
}
#menuContents {
width:190px;
}
jQuery funcs:
$('#activator').mouseover(function () {
$('#menu').show('slow');
});
$('#activator').mouseout(function () {
$('#menu').hide('slow');
});
HTML:
<div id="myAbsolutePos">
<div id="activator">
// content
<div id="menu" style="display:none">
<div id="menuContents">
// content
</div>
</div>
</div>
</div>
To see problem in action roll over
the current weather location (Thunder Horse) in
the lower left here: http://www.karlsenner.dreamhosters.com/index.php
Any advice is most appreciated!
JG
