del menú de tres niveles es una pequeña explicación, esto es gracias a lo que me dio isabelm , espero que les sirva, y si ven algo que esta mal me lo digan, solo pónganle sus estilo y ya.
no le puse estilo para que no vean tanto código, solo entiendan el código, pero la fuente es de isabel solo yo acorte el código
espero sus comentarios para seguir mejorando esto.
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: #009933;
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 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;
}
.contenedor .menu .menu1 .menu2 li:hover .menu3 { /* la tercera lista es absoluta y solo cambia la posicion */
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>