El HTML es este:
Código HTML:
<!-- Menú seleccionado: galería-->
<div id="menu">
<ul id="mainlevel-nav" class="menumainlevel-nav">
<li class="item1">cosas</li>
<li class="item2">cosas</li>
<li class="itemx">cosas</li>
<li class="parent active item6" id="current">
<a href="/es/galeria.html">
<span>Galería</span>
</a>
<ul>
<li class="item7">
<a href="/es/galeria/collage.html">
<span>Collages</span>
</a>
</li>
<li class="item8">Lienzos</li>
<li class="item9">cosas</li>
<li class="itemx">cosas</li>
</ul>
</li>
</ul>
</div>
Código HTML:
<!-- Menú seleccionado: collages-->
<div id="menu">
<ul id="mainlevel-nav" class="menumainlevel-nav">
<li class="item1">cosas</li>
<li class="item2">cosas</li>
<li class="itemx">cosas</li>
<li class="parent active item6">
<a href="/es/galeria.html">
<span>Galería</span>
</a>
<ul>
<li id="current" class="active item7">
<a href="/es/galeria/collage.html">
<span>Collages</span>
</a>
</li>
<li class="item8">Lienzos</li>
<li class="item9">cosas</li>
<li class="itemx">cosas</li>
</ul>
</li>
</ul>
</div>
Es lo que genera Joomla para los menús (por eso no puedo modificar el HTML). La lista que hay dentro de otra es porque es un submenú del primero. Todos los <li> son lo mismo => <a><span>
Cuando seleccionas un menú en Joomla, se destaca el <li> con la id "current". También, se añade la clase "active" a ese <li> y a sus superiores (como sale en el 2º ejemplo)
Al final, lo que quiero es que si pasa el caso 1, se ponga en negro galerías, si pasa el paso 2, se ponga en negro los dos (osea el <li> y sus padres). Por eso tengo:
Código:
#menu li.active > a {
font-weight: bold
}
Lo he probado en IE7, 8 y firefox 3.5. En los tres va bien, en IE6, no lo he probado (no lo tengo instalado), pero si decís que va mal... os creo ^^
PD: Lo probaré también en opera 10
PD: Para poner de qué tipo es un código (en el foro), cómo es? {code
type=css}{/code} o cómo?
Saludos!