quitar estilo heredado de padre

[loncho_rojas]

Buenas.. como estan.. lo que quisiera es quitar un estilo anidado en un componente, para que lo que este dentro no tome el estilo.. ejemplo..

Tengo un estilo css para la etiqueta <a> que este en un <div class X> el mismo al hacer un Hover, posee un background.

pasa que dentro de este enlace coloco un sub menu que tambien toma el estilo, y lo que quiero es que tenga un estilo neutro, y no tome el Bground ni otra caracteristica que no desee.. por ejemplo:

Código CSS:

ul#nav.v2 a{
    color: #FFF;
    background: url(a_bg.jpg) repeat-x left bottom;
}
 

aplicado seria:

Código HTML:

<ul id="nav" class="v2">
<li><a>Link</a></li>
</ul>
 

al menos eso funciona..

el problema es que si creo un submenu dentro de eso, tambien me toma el background y no quiero que lo tome, es decir

Código HTML:

<ul id="nav" class="v2">
     <li>
     <a>Link</a>
<!--aca empieza el submenu-->
        <ul class="middle">
            <h3>Design Services</h3>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Hosting Solutions</a></li>
                <li><a href="#">Logo Design</a></li>
                <li><a href="#">e-Commerce</a></li>
                <li><a href="#">WordPress Integration</a></li>
                <li><a href="#">PSD/PNG Conversion</a></li>
            </ul>
 
     </li>
 

como podria hacer para que el background no me tome heredada la etiqueta <a> que esta dentro del <ul class="middle">?? se agradece

[chichote]

sigue la cascada y asignale el estilo que quieres al submenu.

saludos.

[IsaBelM]

yo antes de nada probaría a usar descendentes directos. algo como esto

ul#nav.v2 > li > a

[Tedel]

Solo ponle un estilo al hijo que anule lo que manda el padre. Eso debería resolverlo.

Ejemplo:

#nav li {color: blue}
#nav li a {color: red}