hola tengo el siguiente codigo que descargue de esta página:
http://nediam.com.mx/tutoriales/css_...zado/index.php
lo copie tal cual para ver como funcionaban las listas, pero cuando lo probe no me desplegaba el submenu, alguien me puede ayudar??
el codigo es el siguiente:
Código HTML:
<style type="text/css">
/* Comienza id #menu */
#menu
{
position: relative;
list-style-type: none;
background-color:#003399;
}
#menu a
{
font-family: Arial, sans-serif;
font-size: 11pt;
color:#FFFFFF;
display: block;
padding: 0.2em 0.5em;
text-align: center;
text-decoration: none;
background-color:#003399;
}
#menu a:hover
{
background-color:#66CCFF;
color:#000000;
}
/* Termina id #menu */
/* Comienza clase .menuitem */
.menuitem
{
position: absolute;
margin: 0;
padding: 0;
width: 10em;
height: 1.55em;
overflow: hidden;
}
.menuitem ul
{
padding: 0;
list-style-type: none;
}
.menuitem:hover { display:block; }
/* Termina clase .menuitem */
/* Comienzan clases .submenu y .subsubmenu*/
.submenu li { position: relative; }
.subsubmenu
{
position: absolute;
top: 0;
left: 9.95em;
width: 10em;
display: none;
}
.submenu li:hover .subsubmenu
{
display: block;
}
/* Terminan clases .submenu y .subsubmenu*/
/* Comienza posicion horizontal de cada opcion del menu principal */
#m1 { left: 0; }
#m2 { left: 9.95em; }
#m3 { left: 19.85em; }
#m4 { left: 29.80em; }
#m5 { left: 39.75em; }
/* Termina posicion horizontal de cada opcion del menu principal */
/* Comienzan bordes */
.b_top {border-top:1px solid #369; }
.b_right {border-right:2px solid #ffffff; }
.b_bottom {border-bottom:1px solid #369; }
.b_left {border-left:2px solid #ffffff; }
/* Terminan bordes */
</style>
</head>
<body>
<ul id='menu'>
<li class='menuitem' id='m1'><a class='b_top b_right b_bottom b_left' href='#'>Opción 1</a>
<ul class='submenu'>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a>
<ul class='subsubmenu'>
<li><a class='b_top b_right b_left' href='#'>Algo más</a></li>
<li><a class='b_right b_left' href='#'>Algo más</a>
<ul class='subsubmenu'>
<li><a class='b_top b_right b_bottom b_left' href='#'>Algo más</a></li>
</ul>
</li>
<li><a class='b_right b_bottom b_left' href='#'>Algo más</a></li>
</ul>
</li>
<li><a class='b_right b_bottom b_left' href='#'>Subopción</a>
<ul class='subsubmenu'>
<li><a class='b_top b_right b_left' href='#'>Algo más</a></li>
<li><a class='b_right b_left' href='#'>Algo más</a></li>
<li><a class='b_right b_bottom b_left' href='#'>Algo más</a></li>
</ul>
</li>
</ul>
</li>
<li class='menuitem' id='m2'><a class='b_top b_right b_bottom' href='#'>Opción 2</a>
<ul>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_bottom b_left' href='#'>Subopción</a></li>
</ul>
</li>
<li class='menuitem' id='m3'><a class='b_top b_right b_bottom' href='#'>Opción 3</a>
<ul class='submenu'>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a>
<ul class='subsubmenu'>
<li><a class='b_top b_right b_left' href='#'>Algo más</a></li>
<li><a class='b_right b_bottom b_left' href='#'>Algo más</a></li>
</ul>
</li>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_bottom b_left' href='#'>Subopción</a></li>
</ul>
</li>
<li class='menuitem' id='m4'><a class='b_top b_right b_bottom b_left' href='#'>Opción 4</a>
<ul>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_bottom b_left' href='#'>Subopción</a></li>
</ul>
</li>
<li class='menuitem' id='m5'><a class='b_top b_right b_bottom b_left' href='#'>Opción 5</a>
<ul>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_left' href='#'>Subopción</a></li>
<li><a class='b_right b_bottom b_left' href='#'>Subopción</a></li>
</ul>
</li>
</ul>
bye!!!