[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