jquery: a bug in in the drop down menu

Hi,

I have this bug which i have spent ages to fix it but i still cannot understand why it happens...

this is the html code,

<div id="menu">
<ul>
<li><a href="news">NEWS</a>
<ul>
<li><a href="news">News</a></li>
<li><a href="opportunities">Opportunities</a></li>
<li><a href="newsletters">Newsletters</a></li>
</ul>
</li>

<li><a href="work">WORK</a>
<ul>
<li><a href="">Past</a>
<ul>
<li><a href="work-past">Works</a></li>
<li><a href="archive">Archive</a></li>
<li><a href="testimonials">Testimonials</a></li>
</ul>
</li>

<li><a href="">Present</a>
<ul>
<li><a href="work-present">Works</a></li>
<li><a href="hidden-city-festival-present">Hidden City Festival</a></li>
<li><a href="traces">Traces</a></li>
<li><a href="testimonials-present">Testimonials</a></li>
</ul>

</li>

</ul>
</li>
...
...
</ul>
</div>

this is the css to make the drop down menu,

/* menu style*/
.row_bottom div {
overflow:visible;
}

#menu {
padding:8px 0px 2px 12px;
}

#menu li {
margin:0px 10px 0px 0px;
padding:0px 10px 0px 0px;
border-right: 2px solid #ffffff
}

#menu .last{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
border-right: 0px solid #ffffff
}

#menu a {
font-size:12px;
font-weight:bold;
padding:0px 0px 5px 0px;
color:#ffffff;
}

#menu a:hover {
text-decoration:none;
color:#913291;
}

#menu .current > a {
color:#df3be1;
}

/* submenu style*/
#menu li ul {
position:absolute;
display: none;
background-color:#933594;
margin:5px 0px 0px -12px;
z-index:11;
}

#menu li ul li {
float:none;
margin:0px 0px 0px 0px;
padding:2px 20px 2px 5px;
border-right: 0px solid #ffffff;
border-bottom: 1px dotted #ffffff;
}

#menu li ul .sublast{
border-bottom: 0px dotted #ffffff;
}

#menu li ul a{
font-weight:normal;
color:#ffffff;
}

#menu li ul a:hover {
color:#ffffff;
}

#menu li ul li:hover{
background-color:#df3be1;
}

#menu li:hover ul{
display: block;
}

#menu li:hover ul ul{
display: none;
}

/*subsubmenu style*/
#menu li ul ul {
position:absolute;
background-color:#933594;
margin:-16px 0px 0px 70px;
z-index:11;
}

#menu li ul li:hover ul{
display: block;
}


this is the jquery,

$("#menu > ul > li").hover(function(event){
$(this).find('ul').css({display: 'none'}).fadeIn("fast");
$(this).find('ul > li > ul').css({display: 'none'});

},function(){
$(this).find('ul').fadeOut("fast");
$(this).find('ul > li > ul').css({display: 'none'});
});

$("#menu > ul > li > ul > li ").hover(function(event){
$(this).find('ul').css({display: 'none'}).fadeIn("fast");
},function(){
$(this).find('ul').fadeOut("fast");
});

the bug is at the third level of this drop down menu. sometimes u can see the third level menu and sometimes u see all of the third menus at once. sometimes u can select the item in the third menu easily sometimes these third menus just disappear...

if u dont know what i m trying to explain above, here is the link,
http://partexchangeco.org.uk/work

if u hover on the Work then go down to one of the drop down items, then u will see the third level menu. if u do the hover a few times, then u will see the bug...

it is strange!

let me know if u know what i have coded wrong in jquery.

many thanks,
Lau