Foros del Web » Creando para Internet » CSS »

problema con lista desplegable

Estas en el tema de problema con lista desplegable en el foro de CSS en Foros del Web. Hola, alguien me podria echar una mano, estoy haciendo 2 listas desplegables pero siempre me salen pegadas y yo quisiera que esten separadas, aui mi ...
  #1 (permalink)  
Antiguo 22/07/2011, 10:53
 
Fecha de Ingreso: octubre-2010
Ubicación: Guayaquil
Mensajes: 195
Antigüedad: 6 años, 5 meses
Puntos: 3
problema con lista desplegable

Hola, alguien me podria echar una mano, estoy haciendo 2 listas desplegables pero siempre me salen pegadas y yo quisiera que esten separadas, aui mi codigo:

Código HTML:

<body> 

<ul id="menu1">
<li><a href="url...">HOME</a></li>
<li><a href="url...">THEESPECTROMANIA</a></li>
<li><a href="url...">HTML</a>
<ul> 
<li><a href="url...">CENTER</a></li>
<li><a href="url...">FONT</a></li>
</ul></li>
<li><a href="url...">CSS</a>
<ul>
<li><a href="url...">GRADIENT</a></li>
<li><a href="url...">BORDES</a></li>
</ul></li>

<style type = "text/css">
#menu1{padding-left:25px; margin-top:10px;}
#menu1 li{list-style:none; float:left;}
#menu1 li a{display:block; width:200px;
height:20px; background:#99cccc;
border:1px solid; padding:2px;
text-decoration:none;
text-align:center; color:#000;
font-family:arial; font-size:15px;
font-weight:bold;}
#menu1 li a:hover{background:navy;
border-color:transparent;
color:#ffcc00;}
#menu1 li ul{display:none; position:absolute;}
#menu1 li ul li {display:block; float:none; 
position:relative; padding:0px;}
#menu1 li:hover ul{display:block; padding-left:0px;}

</style>

<ul id="menu">
<li><a href="url...">HOME</a></li>
<li><a href="url...">THEESPECTROMANIA</a></li>
<li><a href="url...">HTML</a>
<ul> 
<li><a href="url...">CENTER</a></li>
<li><a href="url...">FONT</a></li>
</ul></li>
<li><a href="url...">CSS</a>
<ul>
<li><a href="url...">GRADIENT</a></li>
<li><a href="url...">BORDES</a></li>
</ul></li>



<style type = "text/css">
#menu{padding-left:25px; margin-top:200px;}
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:200px;
height:20px; background:#99cccc;
border:1px solid; padding:2px;
text-decoration:none;
text-align:center; color:#000;
font-family:arial; font-size:15px;
font-weight:bold;}
#menu li a:hover{background:navy;
border-color:transparent;
color:#ffcc00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block; float:none; 
position:relative; padding:0px;}
#menu li:hover ul{display:block; padding-left:0px;}

</style>
</body> 
</html> 

Etiquetas: desplegable, lista, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:46.