Menu drop down some com o mouse em cima

[Th3F34r 0]

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>

[André do Vale 76]

O efeito para mostrar o menu está duplicado, sendo que tem o :hover no CSS, e a mesma coisa no jQuery. É esperado que algo assim acontecesse.

 

Escolha por 1 caminho apenas.

 

PS.: no jQuery, pode resumir para "slideToggle".

PS.: use o .stop() para não "bugar" seu efeito.