Hola, muy buenas a todos y a todas. El caso es que para un mini-proyecto estoy haciendo una página web, la cual tiene un menú desplegable funcionando en HTML.

La idea es tener un contenedor(div) principal que englobe a todo el menú. En primera instancia, solo serán visibles un par de botones, pero cuando pulses cualquiera de esos dos botones, entonces aparecerá un submenú.

El código que llevo es el siguiente: (las funciones highPrincipalMenu resaltan el botón sobre el que está el ratón y la función lowAll desresalta todos los botones)

<div id="menuBlock" onmouseout="lowAll();">
	<div id="menuExpander" onmouseover="highPrincipalMenu('menuExpander');">
		<img src="images/menu/menu.png" width="100%" height="100%">
	</div>
 
	<div id="menuBlockItem">
	</div>
 
	<div id="menuShare" onmouseover="highPrincipalMenu('menuShare');">
		<img src="images/menu/share.png" width="100%" height="100%">
	</div>
</div>

El problema es el siguiente: cuando yo paso el ratón sobre sobre cualquiera de los botones funciona perfecto, pero cuando quito el ratón de los botones se desmarcan, pero lo que yo quiero es que cuando el ratón deje el contenedor PRINCIPAL se apagen los botones

Espero haberme expresado bien, y ¡muchas gracias!