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