submenu pure css and html disappears - html

Question

I have a menu which has a submenu. the submenu appears when i hover the main menu, but as soon as i try to go down to the submenu it disappears most of the time. Only if i'm very fast I'm able to get to it before it disappears.
HTML:
<header>
<div class="wrapper">
<img src="images/logo.png" width="125" height="20" alt="">
<nav class="fl">
<ul >
<li> Target Groups
<ul>
<li>Manage Target Groups</li>
<li>Create Target Group</li>
</ul>
</li>
<li>Activity</li>
<li>Reports</li>
<li>Settings</li>
<li>Admin</li>
</ul>
</nav>
</div>
<!-- end .wrapper -->
</header>
CSS:
header{
margin-top: 30px;
background: url(../images/header-bg.png) no-repeat;
width: 942px;
height: 76px;
padding: 27px 25px 5px;
}
header .wrapper{
border-bottom: 1px solid #e5e5e5;
float:left;
width: 862px;
padding: 0 40px 5px;
position:relative;
}
header nav{
margin-left: 45px;
}
header nav ul{
z-index: 100;
}
header nav ul li{
display: inline;
margin-right: 35px;
line-height: 20px;
z-index: 100;
}
header nav ul li ul{
display: none;
position:absolute;
width: 962px;
left: 0;
top: 40px;
}
header nav ul li ul li{
float: left;
}
header nav ul li:hover ul{
display:block;
}
header nav ul li a{
font-size:16px;
color: #5b666a;
text-decoration: none;
padding: 5px 10px;
}
header nav ul li a.selected,header nav ul li a:hover{
background: #657073;
color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
I'm really stuck, please help...

Answer 1

In order to achieve what you want, it's better to use padding-top for your submenu, instead of absolute positioning (with the latter you'll end up with 'empty' space between menu and submenu, causing mouseout):
http://jsfiddle.net/BAzx7/
EDIT: And I added position:relative; to ul li, and a lower z-index to ul li ul, otherwise the submenu would be over the main menu - and disable it...
http://jsfiddle.net/BAzx7/1/

Answer 2

I've also fixed this with hoverIntent on one of my drop downs. Was an exclusive IE bug at the time but was a easy fix.
http://cherne.net/brian/resources/jquery.hoverIntent.html
This is how my function looked.
$('.main-nav > ul > li').hoverIntent({
timeout: 300,
over: function () {
$(this).addClass('hover')
},
timeout: 300,
out: function () {
$(this).removeClass('hover')
}
});
My markup was in the same structure as the son of sucker fish menu.