colocar menus hechos de divs uno al lado del otro

r0xdrig0 · #1 (**permalink**) 26/06/2012, 15:02

hola amigos, les cuento tengo un menu desplegable con jquery, este menu lo hice con puros divs con el atributo class para cada div lo y q pasa es q solo tengo el menu con un solo item q al hacer click se desplegan sus subitems y lo q quiero ahora es seguir agregando items a su lado derecho del item existentes, obviamente alineados y eso es lo q no he logrado, ya q probe con el atributo float left, pero no me funcionciona al igual q el atributo float right, este es mi prblema ¿como le agrego items al menu hacia el lado derecho alineados con el item existente?, aca esta mi codigo
HTML y Javascript

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="css/estilo.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú Toggle</title>
<script type="text/javascript">
$(document).ready(function()
{
	
	$(document).click(function(){
	    
	    $("div.menu_body").hide();
	});
	
	$("#firstpane p.menu_head").click(function(e)
    {
		
		$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       	$(this).siblings().css({backgroundImage:"url(img/left.png)"});
		e.stopPropagation();
		
	 });
});
</script>
</head>

<body>
<div style="float:left;" >
  <div id="firstpane" class="menu_list">
  		<p class="menu_head"><strong>Inventario</strong></p>
		<div class="menu_body">
		<p class="menu_head">Carga de Datos</p>
		<div class="menu_body">
		<a href="#">Cargar Archivo</a>
         <a href="#">Ingreso Manual</a>
         <a href="#">Estado Cargas</a>	
		</div>
		<p class="menu_head">Inspección</p>
		<div class="menu_body">
			<a href="#">Generar Pautas</a>
         <a href="#">Inspecciones</a>
         <a href="#">Estado Inspecciones</a>	
		</div>
		<p class="menu_head">Reportes</p>
		<div class="menu_body">
          <a href="#">Resumen</a>
         <a href="#">Detalle Inventario</a>		
       </div>
       <p class="menu_head">Mantenedor</p>
		<div class="menu_body">
          <a href="#">Unidad</a>
         <a href="#">Marca/Modelo</a>		
       </div>   
  </div> 
</div>
</body>
</html>

Codigo CSS

Código:

body {
	margin: 10px auto;
	font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {	
	width: 150px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
    font-weight:bold;
    background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a{
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }

espero me puedan guiar de antemano gracias...