¿Por qué no cambia el color de fondo del menú?

2 menus:prod & prod2 , cuando el mouse focus on prod2 , el color de fondo cambia, pero cuando el mouse se enfoca en prod1 the background color doesn't change .

¿Por qué no cambia?

Estilos:

 ul.hMenu { margin: 0; padding: 0; z-index: 1; } ul.hMenu > li { margin: 0; padding: 0; list-style: none; float: left; width:140px; } ul.hMenu li a { display: block; text-align: left; text-decoration: none } ul.hMenu li > div { position: absolute; display: none; } ul.hMenu div a {background: yellow; } div.lay1{ float:left;} div.lay1 br{line-height:50%} .topMenu{font:bold 12px arial;color:#169e39;text-decoration: none;} .secondMenu{font:12px arial;color:#000000;text-decoration: none;} .arrow_box { position: relative; background: red; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(149, 213, 53, 0); border-bottom-color: red; border-width: 13px; left: 10%; margin-left: -13px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-bottom-color: #c2e1f5; border-width: 19px; left: 10%; margin-left: -19px; } 

Guión:

 function showMenu(obj){ var a=obj.children[0]; a.style.color="blue"; var div = obj.children[1]; obj.style.backgroundColor="yellow"; div.style.display="block"; } function hideMenu(obj){ var a=obj.children[0]; a.style.color="red"; var div = obj.children[1]; div.style.display="none"; obj.style.backgroundColor=""; } 

HTML:

  




Test

Problema en JsFiddle

¡Probé tu código y funcionó! ¿Cuál es tu navegador? por favor coloque una demostración y también agregue este código también

 a.setAttribute('style','background-color:blue'); 

algunos navegadores tienen incompatibilidad con element.style

give CSS Like this

 .arrow_box{ position:absolute; white-space:nowrap} 

Mira esto

http://jsfiddle.net/zz5XJ/2/

Por favor revisa tu HTML:

Porque ejecuta la misma función para Pord or Pord2 pero el html interno es diferente para ambos li . por lo que la function showMenu() funciona de manera diferente tanto para Pord or Pord2 :

HTML:

  

Prueba esto

ACTUALIZADO

Coloque
antes de arrow_box div para ambos li y algunos cambien a Javascript:

 var div = obj.children[2]; 

Javascript –

  function showMenu(obj){ var a=obj.children[0]; a.style.color="blue"; var div = obj.children[2]; obj.style.backgroundColor="yellow"; div.style.display="block"; } function hideMenu(obj){ var a=obj.children[0]; a.style.color="red"; var div = obj.children[2]; div.style.display="none"; obj.style.backgroundColor=""; } 

Jsfiddle actualizado