Sub Cats in Sub Nav via mouse hover on Parent

Hey there guys,

Really the title says it all so I’ll get straight into the nitty gritty on what i’m trying to achieve without Multi-Level Navigation Plugin.

Scenario

When the user HOVERS over Parent Category
I’m trying to get the parent category to fade in a list of child categories within that parent at one level on the sub navigation bar but only fading out when the sub nav bar loses focus not when the parent loses focus.

When Parent Category is SELECTED
I’m wanting the parent category to have my selected class so the user knows that they’re on the categories page (which displays the posts within all the categories) and display the same level of sub categories within the parent in the sub nav bar.

I hope that’s a clear enough explaination haha. Below is an image link to what I mean when the parent category is selected.

https://www.codr.eu/wp-content/uploads/2009/06/subnav-subcats.jpg

I know I’m going to need to use jQuery for the fadeIn, fadeOut stuff but yeah I just need to figure out how to get the list items to display in the sub nav.

Here’s my nav and subnav code too.

<div id="nav-wrap">
	<div id="main-nav">
		<ul>
			<?php if(is_home()): ?>

				<li class="current"><a href="<?php echo get_settings('home'); ?>/" title="Home!">Home</a></li>

				<?php wp_list_categories('depth=1&orderby=id&hide_empty=0&exclude=1&title_li='); ?>
				<?php wp_list_pages('depth=1&orderby=id&title_li='); ?>

				<?php else : ?>

				<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>

				<?php wp_list_categories('depth=1&orderby=id&hide_empty=0&exclude=1&title_li='); ?>
				<?php wp_list_pages('depth=1&orderby=id&title_li='); ?>

			<?php endif; ?>
		</ul>
	</div>
</div>

<div id="sub-nav-wrap">
	<div id="sub-nav">

	</div>
</div>

Hope you guys can help. ^_^