Foros del Web » Creando para Internet » CSS »

Submenús no alineados

Estas en el tema de Submenús no alineados en el foro de CSS en Foros del Web. Hola de nuevo. Nuevo problem, ahora los submenus del menú vertical no salen paralelos a su menu correspondiente. Estilo css del menú vertical: (edito) Código: ...
  #1 (permalink)  
Antiguo 30/07/2009, 08:13
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 14 años, 8 meses
Puntos: 0
Submenús no alineados

Hola de nuevo.

Nuevo problem, ahora los submenus del menú vertical no salen paralelos a su menu correspondiente.

Estilo css del menú vertical: (edito)
Código:
#mene {margin: 0;	padding: 0;	list-style: none;	width: 211px;}
#nov ul li {	position: relative;	}
#nov li ul {	position: absolute;	left: 211px; display: none;	}
#nov li a {	display: block;	text-decoration:none;	color: #777;	background: transparent;	padding: 5px;}
#nov ul {	margin: 0;	padding: 0;	list-style: none;	width: 211px;	}
#nov ul li {position: relative;}
#nov li:hover ul { display: block; }

.style2 {
	font-family: Tahoma;
	font-size: small;
}
nota: ahora si sale el sub menú, pero no sale en linea con el menu

menú css vertical:(edito)
Código:
<div id="mene" style="height: 169px">
<ul id="nov"> 
    <li class="style2">Principal</li> 
    <li class="style2"><a href="#">Artículos y entrevistas</a></li> 
    <li><span class="style2"><a href="#">Conoce al instructor</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li>
    <li><span class="style2"><a href="#">Jeet Kune Do</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li><li><span class="style2"><a href="#">Filipino Martial Arts (KALI-ESKRIMA-ARNIS)</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li><li><span class="style2"><a href="#">Maphilindo Silat & Majapahit Martial Arts</a></span> 
      <ul> 
        <li><a href="#">Imagenes</a></li> 
      </ul> 
    </li>
    </ul>
</div>
nota: he metido el menú en una etiqueta <div>.

El problema lo tengo con los submenus del menú vertical que no salen en linea con con el menú (salen una linea por debajo)
  #2 (permalink)  
Antiguo 30/07/2009, 11:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Submenús no alineados

Añade en la primera línea de tu css lo siguiente:
Código css:
Ver original
  1. * {margin:0; padding: 0; border:0; outline:0; position:relative;}
y lo resaltado en negrita en el marcador:
Cita:
#nov li ul {
display:none;
left:211px;
position:absolute;
top:0;
}
Para cambiar la posición sólo tienes que alterar los valores "left | top"

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 30/07/2009, 11:55
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Submenús no alineados

muchas gracias por contestar,

ahoa los submeus me sale en la parte d arriba
  #4 (permalink)  
Antiguo 30/07/2009, 12:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 9 meses
Puntos: 539
Respuesta: Submenús no alineados

Bien, pues yo tengo la segunda opción frente a su li contenedor:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">/alto_100x100.html
  3. <title>Kseso?: jugando con CSS</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin:0; padding: 0; border:0; outline:0; position:relative;}
  7. #mene {margin: 0;    padding: 0;    list-style: none;    width: 211px;}
  8. #nov ul li {    position: relative;    }
  9. #nov li ul {    position: absolute;    left: 211px; display: none; top: 0;    }
  10. #nov li a {    display: block;    text-decoration:none;    color: #777;    background: transparent;    padding: 5px;}
  11. #nov ul {    margin: 0;    padding: 0;    list-style: none;    width: 211px;    }
  12. #nov ul li {position: relative;}
  13. #nov li:hover ul { display: block; }
  14.  
  15. .style2 {
  16.     font-family: Tahoma;
  17.     font-size: small;
  18. }
  19. </head>
  20. <div id="mene" style="height: 169px">
  21. <ul id="nov">
  22.     <li class="style2">Principal</li>
  23.     <li class="style2"><a href="#">Artículos y entrevistas</a></li>
  24.     <li><span class="style2"><a href="#">Conoce al instructor</a></span>
  25.       <ul>
  26.         <li><a href="#">Imagenes</a></li>
  27.       </ul>
  28.     </li>
  29.     <li><span class="style2"><a href="#">Jeet Kune Do</a></span>
  30.       <ul>
  31.         <li><a href="#">Imagenes</a></li>
  32.       </ul>
  33.     </li><li><span class="style2"><a href="#">Filipino Martial Arts (KALI-ESKRIMA-ARNIS)</a></span>
  34.       <ul>
  35.         <li><a href="#">Imagenes</a></li>
  36.       </ul>
  37.     </li><li><span class="style2"><a href="#">Maphilindo Silat & Majapahit Martial Arts</a></span>
  38.      <ul>
  39.        <li><a href="#">Imagenes</a></li>
  40.      </ul>
  41.    </li>
  42.    </ul>
  43. </div>
  44. </body>
  45. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 30/07/2009, 16:18
 
Fecha de Ingreso: julio-2009
Mensajes: 117
Antigüedad: 14 años, 8 meses
Puntos: 0
Respuesta: Submenús no alineados

muchas gracias funciona bien
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 09:23.