no me muestra el submenu

lilith_sr · #1 (**permalink**) 05/07/2007, 17:14

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!!!