Hola estoy aciendo una lista en 3 niveles, pero el ultimo nivel no se imprime bien es pantalla.
Les dejo los codigos para que vean como se imprime, y si me puden ayudar a solucionarlo.
style2.css
Código:
/*====== Menu Desplegable ========*/
ul#menu li{
list-style:none;
display:inline-block;
margin:0;
padding:0;
list-style-type: none;
float: left;
/*text-transform: uppercase;*/
font-size: 15px;
font-weight: bold; /*Esto te genera una especie de cuadro donde se encierra al texto, ent. debo usar PADDING, para darle las distancias al DIV "contenedor".*/
text-align:justify;
/*line-height: 20px;*/
margin-left:10px;
padding-top:10px;
padding-right: 5px;
position: relative;
}
ul#menu li a {/*Propiedades de los hipervinculos asociados a la lista*/
text-decoration: none;
color: red;/*#222;*/
position: relative;
}
/*=== Segundo nivel del menu ===*/
ul#menu li ul {/*Empieza segundo nivel*/
display: none;
}
ul#menu li:hover ul{
background: red;
display: block;
position:absolute;/*Muy importamte*/
padding: 0px;
text-align: left;
}
ul#menu li:hover ul li{
float:none;
display: block;
font-weight: bold;
background: red;
width: 190%;/*es el ancho del menu desplegable*/
}
ul#menu li ul li a{/*Termina segundo nivel*/
color: white;
}
/*=== Tercer nivel del menu ===*/
ul#menu li ul li ul{/*Empieza tercer nivel*/
display: none;
}
ul#menu li ul li:hover ul{
background-position:bottom;
display: block;
background: black;
/*position:absolute;/*Muy importamte*/
padding: 0px;
text-align: left;
}
ul#menu li:hover ul li:hover ul{
display: block;
top:0;
left:100%;
}
ul#menu li ul li ul li a{
color: gray ;
}
/*
ul#menu li:hover ul li:hover ul li a{/*Termina tercer nivel
color: black;
} */
/*===Fin Propiedades Menu Desplegable====*/
El html
Código:
<!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">
<head>
<title>Red</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style2.css" media="screen" />
<!-- <script language="javascript" type="text/javascript" src="firebug/pi.js"></script>
<script language="javascript" type="text/javascript" src="firebug/firebug-lite.js"></script> -->
</head>
<body>
<ul id="menu">
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a>
<ul>
<li><a href="#">nivel 2</a></li>
<li><a href="#">nivel 2</a>
<ul>
<li><a href="#">nivel 3.1</a></li>
<li><a href="#">nivel 3.2</a></li>
</ul>
</li>
<li><a href="#">nivel 2</a></li>
</ul>
</li>
</ul>
</body>
GRacias