Submenús no alineados

taoshi · #1 (**permalink**) 30/07/2009, 08:13

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)

kseso? · #2 (**permalink**) 30/07/2009, 11:13

Añade en la primera línea de tu css lo siguiente:

Código css:

Ver original* {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

taoshi · #3 (**permalink**) 30/07/2009, 11:55

muchas gracias por contestar,

ahoa los submeus me sale en la parte d arriba

kseso? · #4 (**permalink**) 30/07/2009, 12:47

Bien, pues yo tengo la segunda opción frente a su li contenedor:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">/alto_100x100.html
<head>
<title>Kseso?: jugando con CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0; padding: 0; border:0; outline:0; position:relative;}
#mene {margin: 0;    padding: 0;    list-style: none;    width: 211px;}
#nov ul li {    position: relative;    }
#nov li ul {    position: absolute;    left: 211px; display: none; top: 0;    }
#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;
}
</style>
</head>
<body>
<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>
</body>
</html>

taoshi · #5 (**permalink**) 30/07/2009, 16:18

muchas gracias funciona bien