Hi,
I have a bit of a strange problem.
I have a level 1 nav tab, when moused, this shows a sub nav "div".
The sub nav div contains anchor refs. My code stipulates that when the mouse moves out of the sub nav div that it will fade out. Problem is though that it also fades out when I mouse over one of the anchor refs on the sub nav div.
From my limited knowledge I can deduce that moving over the anchor ref is effectively causing the event to fire due to the mouse moving out of the sub nav div. Can anyone explain what is happening and how I can rectify this. A code snippet is below.
<
div
class
="levelonetab"
style
="
width
:
200px
;
height
:
50px
;
background-color
:
green
;
"></
div
>
<
div
id
="subnavitem"
style
="
width
:
100px
;
height
:
40px
;
display
:
none
;
background-color
:
#999999
;
">
<
a
href
="#">
hello
</
a
>
</
div
>
<
script
type
="text/javascript">
$(document).ready(
function
(){
$(
".levelonetab"
).mouseover(
function
(){
$(
"#subnavitem"
).fadeIn(
"fast"
);
});
$(
"#subnavitem"
).mouseout(
function
(){
$(
"#subnavitem"
).fadeOut(
"fast"
);
});
});
</
script
>