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,

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,

Code:
/* 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,

Code:
$("#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