Como quitar estilos css heredados?

magTpeak · #1 (**permalink**) 08/02/2011, 11:11

Hola buenas, tengo un gran problema.

Estoy intentando poner un menu desplegable dentro de mi pagina web pero resulta que al ser estilos diferentes se ve muy mal

Antes tenia este menu y funcionaba perfectamente

Código:

        <div class="menu">
          <ul>
            <li><a href="index.php" class="active"><span>Inicio</span></a></li>
            <li><a href="empresa.html"><span> Nosotros</span></a></li>
            <li><a href="instalacion_formacion.html"><span>Servicios</span></a></li>
            <li class="menu_head"><a href="#"><span>Productos</span></a></li>
            <li><a href="contacto.html"><span> Contacto </span></a></li>
          </ul>
        </div>

Pero al poner el siguiente codigo todo se desordena:

Código:

        <div class="menu">
          <ul>
            <li><a href="index.php" class="active"><span>Inicio</span></a></li>
            <li><a href="empresa.html"><span> Nosotros</span></a></li>
            <li><a href="instalacion_formacion.html"><span>Servicios</span></a></li>
            <li class="menu_head"><a href="#"><span>Productos</span></a>
<ul> 
			<li><a href="#">¿Qué es jQuery?</a></li> 
			<li><a href="#">¿Por qué debería usarlo?</a></li> 
			<li><a href="#">¿Por qué tengo que seguir poniendo elementos de lista?</a></li> 
		</ul> 
</li>
            <li><a href="contacto.html"><span> Contacto </span></a></li>
          </ul>
        </div>

Quiero que cuando haga click en productos que se me muestre el menu desplegable tal como este en este pagina:
http://jlc-productions.net/tips/ddmenu/menu6.htm

Me gustaria poder quitar el estilo css heredado de <div class="menu">

Un saludo

sanxuan · #2 (**permalink**) 08/02/2011, 12:15

La herencia en CSS, en términos generales y en ausencia de la declaración !important, es muy simple.
Los archivos externos se leen primero. El último enlace CSS sobreescribe a las propiedades descritas en enlaces a hojas de estilo precedentes.
Luego tienen prioridad las hojas de estilo internas (declaradas en el <head> de tu HTML) sobre los enlaces que le anteceden.
Por último, si existen etiquetas link dentro de <body> deberían sobreescribir las reglas anteriores.
Tan solo los estilos en línea tienen preferencia sobre lo anterior.

Para hacer que aparezcan o desaparezcan menús al pinchar con el ratón sobre ellos lo habitual es usar javascript.
Mediante javascript puedes modificar el CSS de manera dinámica a tu antojo.
Con CSS sólo se garantizan los comportamientos :link, :focus, :active, y :hover.