esto solo tiene el efecto que me pidieron de hover
Código PHP:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title
>Documento
sin t
í
;tulo
</title
> <style type="text/css">
<!--
.contenedor {
background-color: #FFFF00;
width: 800px;
margin-right: auto;
margin-left: auto;
height: 400px;
}
.menu {
background-color: #FF9900;
height: 50px;
}
/*-------------esto de abajo es para el menu de tres niveles -----------------*/
ul{ padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
width: 150px;
height:30px; /* tamaño de boton y color*/
float: left;
background-color: #0000FF;
padding-top: 20px; /* con esto muevo las letras a la distancia que quiera*/
padding-right: 0px;
padding-bottom: 0px;
padding-left: 50px;
}
.menu ul li:hover {
background-color: #003399;
}
.menu ul li ul { display: none; } /* este oculta los botones de abajo*/
.menu ul li:hover {position: relative;} /* la primera lista es relativa */
.menu ul li:hover ul.menu2{ /* la segunda lista es absoluta y muestra la segunda lista*/
display: block;
position: absolute;
left:0px;
top:50px;
}
.contenedor .menu .menu1 .menu2 li:hover .menu3 { /* la tercera lista es absoluta y solo cambia la posicion del tercer boton */
display: block;
position: absolute;
left:200px;
top:0px;
}
-->
</style>
</head>
<body>
<div class="contenedor">
<div class=" menu">
<ul class="menu1">
<li>lista1
<ul class="menu2">
<li>lista1a
<ul class="menu3">
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ul>
</li>
<li>lista1a</li>
<li>lista1a
<ul class="menu3">
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ul>
</li>
</ul>
</li>
<li>lista2</li>
<li>lista3</li>
<li>lista4
<ul class="menu2">
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ul>
</li>
</ul>
</div>
solo ponganle el estilo y ya esta
</div>
</body>
</html>