[Programación]Menú desplegable con CSS 2.0

Nestor Gustavo Magnanego nmagnanego en gmail.com
Vie Sep 20 19:27:08 ART 2013


El 20 de septiembre de 2013 16:42, Horacio Castellini <
horacio9573 en yahoo.com.ar> escribió:

> 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>
>
> _______________________________________________
> Programacion mailing list
> Programacion en lugro.org.ar
> http://lugro.org.ar/mailman/listinfo/programacion
>
>
Hola Horacio, me parece que te falta poner class="nav" a todo lo que
clasificaste en la css y veo que sólo si lo pusiste al ul. Saludos.
Néstor
------------ próxima parte ------------
Se ha borrado un adjunto en formato HTML...
URL: <http://lugro.org.ar/pipermail/programacion/attachments/20130920/c5396f80/attachment-0001.htm>


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