[Programación]Menú desplegable con CSS 2.0

Horacio Castellini horacio9573 en yahoo.com.ar
Vie Sep 20 16:42:17 ART 2013


Holas... he tratado de hacer un menú desplegable con una hoja de
estilo, pero cuando coloco el estilo... en clase nav... 

.nav li, ul {
display: none;
position: absolute;
min-width: 140px;
}

puf! se desaparece y no responde a la receta que da youtube... si
alguien me da una mano a donde joraca está el error...  acá mando el
código...

<!DOCTYPE HTML>
<html lan="es">
    <head>
        <title>Menú desplegable</title>
        <meta charset="utf-8" />
        <style type="text/css">
            * {
                        padding: 0px;
                        margin: 0px;
            
            }
            #header {

                        margin: auto;
                        width: 500px;
                        font-family:     Arial, Helvetica, sans-serif;        
            
            }
            ul, ol {
                        list-style:none;            
            }
            .nav li, a {
            
                        background-color: #000;
                        color: #fff;
                        text-decoration: none;    
                        padding: 10px 15px;
                        display: block;        
            
            }
            .nav li, a:hover {
                            background-color: #434343;
            }
            .nav > li {
                    float: left;
            }
            .nav li, ul {
                    display: none;
                    position: absolute;
                    min-width: 140px;
            }
            .nav li:hover > ul {
                    display: block;
            }
            .nav li ul li {
                    position: relative;
            }
            .nav li ul li ul {
                    right: -140px;
                    top: 0px;
            }
        </style>
    </head>
    <body> 
        <div id="header">
            <ul class="nav">
                <li><a href="">Inicio</a></li>
            
                <li><a href="">Servicios</a>
                    <ul>
                        <li><a href="">Submenú 1</a></li>
                        <li><a href="">Submenú 2</a></li>
                        <li><a href="">Submenú 3</a></li>
                        <li><a href="">Submenú 4</a>
                            <ul>
                                <li><a href="">Submenú 1</a></li>
                                <li><a href="">Submenú 2</a></li>
                                <li><a href="">Submenú 3</a></li>
                                <li><a href="">Submenú 4</a></li>
                            </ul>                        
                        </li>
                    </ul>                
                </li>

                <li><a href="">Acerca de</a>
                    <ul>
                        <li><a href="">Submenú 1</a></li>
                        <li><a href="">Submenú 2</a></li>
                        <li><a href="">Submenú 3</a></li>
                        <li><a href="">Submenú 4</a></li>
                    </ul>                
                </li>

                <li><a href="">Contacto</a></li>
            </ul>
        </div>
        
        
    </body>
</html>
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: <http://lugro.org.ar/pipermail/programacion/attachments/20130920/9872008b/attachment.htm>


Más información sobre la lista de distribución Programacion