Menu drop down some com o mouse em cima

Olá pessoal, eu estou criando um menu drop down, está funcionando parcialmente. O erro está quando passa o mouse em cima do mesmo, o sub-menu aparece, mas não se pode passar o mouse para cima dele, pois ele some.

#menu {

	width: 560px;
	height: 125px;
	float: right;
	margin-top: 37.5px;

}

#menu ul {

	list-style: none;
	float: right;

}

#menu ul li:hover > ul {

	opacity: 1;
	display: block;

}

#menu:before, #menu:after {

	content: "";
	display: table;

}

#menu {

	zoom: 1;

}

#menu ul li {

	float: left;
	position: relative;

}

#menu ul li a {

	padding: 0px 5px 0px 5px;
	color: #fff;
	text-transform: uppercase;
	font: normal 11px Arial;
	text-decoration: none;

}

#menu ul li ul { display: none; opacity: 0; position: absolute; top: 25px; left: -20px; z-index: 1; }

#menu ul li ul li { float: left; text-align: center;}

#menu ul li ul li a {

	padding: 10px;
	width: 130px;
	display: block;
	background-color: red;

}

 

 $(document).ready(function(){

 $("#menu ul li").hover(function(){

 $("#menu ul li ul").slideDown();

 }, function(){

 $("#menu ul li ul").slideUp();

 });

 });

 

 <div id="menu">

 <ul>

 <li>Hello World</li>
 <li>
 <a href="PHP Master"></a>
 <ul>
 <li><a href="PHP Master"></a></li>
 <li><a href="PHP Master"></a></li>
 <li><a href="PHP Master"></a></li>
 </ul>
 </li>
 <li>Headshot</li>
 <li>Avocado</li>

 </ul>

 </div>