Foros del Web » Creando para Internet » CSS »

Problema con menu vertical

Estas en el tema de Problema con menu vertical en el foro de CSS en Foros del Web. Hola, hice un menu vertical usando UL y LI hasta en 3 niveles de profundidad. El problema es que los altos de algunos items -a ...
  #1 (permalink)  
Antiguo 07/09/2007, 14:28
 
Fecha de Ingreso: marzo-2004
Ubicación: Lima
Mensajes: 40
Antigüedad: 13 años, 9 meses
Puntos: 0
Pregunta Problema con menu vertical

Hola,
hice un menu vertical usando UL y LI hasta en 3 niveles de profundidad. El problema es que los altos de algunos items -a pesar de que son iguales- no se muestran bien en IE pero si en Forefox.

¿alguien que me de una mano?

Va el CSS
Código:
#menuv {
	list-style-type: none;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	display: block;
	background-image: url(images/dotazul.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	width: 12em;
	margin: 0px;
	height: 100%;
}
#menuv a {
	font-family: "Trebuchet MS", Arial, sans-serif;
	color: #003399;
	text-decoration: none;
	text-align: left;
	display: block;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#menuv a:hover {
	margin: 0px;
	padding: 0px;
}
#menuv ul {
	text-decoration: none;
	text-align: left;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#menuv li {
	color: #FF6600;
	text-decoration: none;
	background-image: url(images/dotazul.gif);
	background-repeat: repeat-x;
	background-position: left top;
	font-weight: bold;
	margin: 0px;
}
#menuv li li {
}
#menuv li li a {
	font-weight: normal;
	color: #003399;
}
#menuv li li a:hover {
}
#menuv li li li {
	font-weight: normal;
	color: #FF6600;
	list-style-type: none;
	padding-bottom: 3px;
}

#menuv li li li a {
	font-weight: normal;
	color: #FF6600;
	list-style-type: none;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 6px;
}
#menuv li li li a:hover {
	font-weight: normal;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 6px;
}

#menuwork {
	list-style-type: none;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 0.75em;
	background-image: url(images/dotazul.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	width: 12em;
	display: block;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#menuwork a {
	list-style-type: none;
	font-family: "Trebuchet MS", Arial, sans-serif;
	background-image: url(images/dotazul.gif);
	background-repeat: repeat-x;
	background-position: left top;
	display: block;
	margin: 0px;
}

#menuwork li a {
	background-image: url(images/vinwork.gif);
	background-repeat: no-repeat;
	background-position: left center;
	color: #FF6600;
	text-decoration: none;
	text-align: left;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 22px;
}
#menuwork li a:hover {
	background-image: url(images/vinworkon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	color: #FF6600;
	text-decoration: underline;
	padding-left: 22px;
}
#menuemail {
	list-style-type: none;
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 0.75em;
	background-image: url(images/dotazul.gif);
	background-repeat: repeat-x;
	background-position: left bottom;
	width: 12em;
	display: block;
}
#menuemail li a {
	font-weight: normal;
	color: #FF6600;
	list-style-type: none;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 22px;
	text-decoration: none;
	background-image: url(images/vinemail.gif);
	background-repeat: no-repeat;
	background-position: left top;
	list-style-image: none;
}
#menuemail li a:hover {
	font-weight: normal;
	color: #FF6600;
	list-style-type: none;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 22px;
	text-decoration: underline;
	background-image: url(images/vinemailon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	list-style-image: none;
}
#menuemail a {
	font-weight: normal;
	color: #FF6600;
	list-style-type: none;
	text-decoration: none;
	background-image: url(images/vinemail.gif);
	background-repeat: no-repeat;
	background-position: left top;
	display: block;
}
Aquí el código
Código HTML:
<div id="menuv"> 
	<ul>
    	<li><a href="#">Menu A</a></li>
	    <li><a href="#"> Menu B</a>
		<ul>
			<li><a href="#">Submenu A</a></li>
		    <li><a href="#">Submenu B</a>
		    	<ul>
				<li><a href="#">subsub1</a></li>
				<li><a href="#">subsub2</a></li>
				</ul></li>
		</ul></li>
		<li><a href="#">Menu C</a></li>
	
</ul>
</div>
<div id="menuwork">
  <li><a href="#">Trabajo</a></li>
</div>
<div id="menuemail">
  <li><a href="#">Contacto</a></li>
</div> 
gracias de antemano
Kati
__________________
Kati
  #2 (permalink)  
Antiguo 08/09/2007, 22:04
 
Fecha de Ingreso: marzo-2004
Mensajes: 338
Antigüedad: 13 años, 9 meses
Puntos: 2
Re: Problema con menu vertical

Buenas Kati! Lo llevavas muy bien hasta llegar a trabajo y contacto... Un <li> nunca puede ir sin sú <ul>. No se muy bien como querras englobar exactamente a trabajo y a contacto pero un código valido sería este:

Código:
<div id="menuv"> 
	<ul>
    	     <li><a href="#">ELEMENTO 1</a></li>
	     <li><a href="#"> ELEMENTO 2</a>
	     <ul>
		   <li><a href="#">ELEMENTO 2.1</a></li>
		    <li><a href="#">ELEMENTO 2.2</a>
		    <ul>
			<li><a href="#">ELEMENTO 2.2.1</a></li>
			<li><a href="#">sELEMENTO 2.2.2</a></li>
		    </ul>
                    </li>
	     </ul>
             </li>
	     <li><a href="#">ELEMENTO 3</a>
             <ul>
		<li><a href="#">TRABAJO</a></li>
		<li><a href="#">CONTACTO</a></li>
	    </ul>	
            </li>
      </ul>
</div>
No se si se me habrá colado alguna etiqueta pero vamos tú código debería aproximarse a eso y a partir de ahí retoca tu CSS y todo empezará a funcionar mejor.

Un saludo!
__________________
SiMpLiFiKa
http://www.manitasdelweb.com
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 01:45.