Help - CSS + Jquery menu ... parent .. children not working!
Dear Guys
I am a bit of a noob when it comes to Jquery but have been hooked ever since i started using it.
To put you into the right atmosphere .... I first created the following HTML
<ul class="main">
<li class="menu"><a href="#">Home</a>
<ul>
<li class="sub"><a href="#">Home</a></li>
<li class="sub"><a href="#">Home</a></li>
<li class="sub"><a href="#">Home</a></li>
<li class="sub"><a href="#">Home</a></li>
<li class="sub"><a href="#">Home</a></li>
</ul>
</li>
</ul>
I then styled this using CSS and hid the inner tier (.menu ul li) using the display attribute and then made this appear using hover (display:block) . The CSS menu works fine no problem till there. It was when i tried using jquery that the problems crept in....and i basically wanted to make the inner tier fadeIn nicely on hover and fadeOut on mouseout .....
and tried doing the following script code (using jquery of course)....
<script type="text/javascript">
$(function() {
$('.menu ul li').hover(
function() {
$(this).children().fadeIn(500);
});
});
</script>
This did not work as expected ... maybe i did not get the concept of the children right ... but if anyone could be kind enough to explain it to me i would be more than grateful as i need this menu....And another question ... how does parent() work in conjunction to children()?
Thanks and Cheers to everyone.