como completar este menu desplegable??

birdaleja · #1 (**permalink**) 25/05/2010, 19:51

hola, estoy hacinedo un menu desplegable, pero ahora no puedo hacer el mouseOut para que no se quede desplegado cuando ya no lo estas usando...
asi tengo el codigo entro para crear un html:

Código:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function()
	{
		$("#onover div.menu_head").mouseover(function()
		{
			$(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
		});
	});
</script>
<style type="text/css">
.menu_list { width: 312px;}
.menu_head { cursor: pointer; position: relative; font-weight:bold; background:#CCC; height: 64px; }
.menu_body { display:none;}
</style>
</head>

<body>
	<div id="onover" class="menu_list">
		
        <div class="menu_head"><!--item -->
			<div class="menu_txt"><a href="#">menu 1</a></div>
		</div>
        <div class="menu_body">
		  <a href="#"><div>submenu1</div></a>
          <a href="#"><div>submenu2</div></a>
		</div>
        
		<div class="menu_head"><!--item-->
        	<div class="menu_txt"><a href="#">menu 2</a></div>
        </div>
		<div class="menu_body">
		  <a href="#"><div>submenu1</div></a>
          <a href="#"><div>submenu2</div></a>
          <a href="#"><div>submenu3</div></a>
          <a href="#"><div>submenu4</div></a>
		</div>
        
        <div class="menu_head"><!--item-->
        	<div class="menu_txt"><a href="#">menu 3</a></div>
        </div>
 
	</div>   
</body>
</html>

cualquier pista puede servir de mucho

saludos!