Justo en estos días estuve con una solución como ésta, y el problema que
encontré es que cuando existían más niveles de anidación, al pasar el
mouse por encima, se cambiaba la definición de todas las listas
(contenidas una dentro de otra) generando algo confuso.
Me explico mejor. Si tuviese una lista dentro de otra, el elemento li se
alteraría tanto para la lista interna (submenu) como para la externa (menu).
<ul id="menu">
<li class="menu_main">General</li>
<li><a href="/main/news">News</a></li>
<li><a href="/main/screenshots">Screenshots</a>
<ul id="submenu">
<li class="menu_main">General</li>
<li><a href="/main/news">News</a></li>
<li><a href="/main/screenshots">Screenshots</a></li>
<li><a href="/main/home">Bacula Home</a></li>
<li><a href="/main/whatis">What is Bacula?</a></li>
</ul>
</li>
<li><a href="/main/home">Bacula Home</a></li>
<li><a href="/main/whatis">What is Bacula?</a></li>
</ul>
Si ese no es el caso, la solución de Sergi es correcta.
Sergi Panisello escribió:
> Claro,
> Yo haría lo siguiente:
>
> #menu ul {margin:0; padding:0px; list-style-type:none;}
> #menu ul li a:link, #menu ul li a:active, #menu ul li a:visited
> {display:block; padding:3px 0px 3px 16px;
> background:url(../images/bullet.gif) no-repeat left;}
> #menu ul li a:hover {display:block; padding:3px 0px 3px 16px;
> background:url(../images/bullet_o.gif) no-repeat left;}
>
>
> On 16/06/09 8:16, "Sergio.Iglesias" <[email protected]> wrote:
>
>
>> O bien poner un display: block al enlace para que "ocupe todo el tamaño de
>> la lista"
>>
>> El 16 de junio de 2009 03:34, Miguel Beltran R.
>> <[email protected]>escribió:
>>
>>
>>> El 15 de junio de 2009 18:44, Reynier Pérez Mira <[email protected]>
>>> escribió:
>>>
>>>
>>>> Buenas a todos:
>>>> Quiero que los tipos de un menú diseñado con UL y LI cambién en
>>>> dependencia de si el usuario pasa o no el mouse por encima del enlace
>>>> contenido en el elemento LI. El menú es algo sencillo:
>>>>
>>>> <ul id="menu">
>>>> <li class="menu_main">General</li>
>>>> <li><a href="/main/news">News</a></li>
>>>> <li><a href="/main/screenshots">Screenshots</a></li>
>>>> <li><a href="/main/home">Bacula Home</a></li>
>>>> <li><a href="/main/whatis">What is Bacula?</a></li>
>>>> </ul>
>>>>
>>>> Las reglas CSS que he intentado aplicar son las siguientes:
>>>> #menu li a:link { text-decoration: none; color: #FFFFFF;
>>>> list-style-type: square; }
>>>> #menu li a:hover { text-decoration: none; color: #000000;
>>>> list-style-type: circle; }
>>>> #menu li a:visited { text-decoration: underline; color: #000000; }
>>>>
>>>> Pero me funciona. ¿Alguna sugerencia?
>>>>
>>> Si te funciona ¿cuál es el problema? jejeje perdon no me pude resistir
>>>
>>> creo que tendrias que poner una imagen al principio del <a> que simule a
>>> que
>>> seria del <li>
>>> porque desde <a> no puedes cambiar las propiedades del <li>, qye es lo que
>>> estas intentando.
>>> y el <li> no tiene pseudo-clases link y visited.
>>> y el hover no lo soporta bien IE < 8 (creo)
>>> _______________________________________________
>>> Lista de distribución Ovillo
>>> Para escribir a la lista, envia un correo a [email protected]
>>> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
>>> http://lists.ovillo.org/mailman/listinfo/ovillo
>>>
>>>
>>
>
> Sergi Panisello
> Dissenyador gràfic
> telèfon: 676083072
> mail: [email protected]
> website: www.fuksia.com
> iChat/Skype: [email protected]
> blog: pictografika.blogspot.com
>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a [email protected]
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://lists.ovillo.org/mailman/listinfo/ovillo
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a [email protected]
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
