Why Doesn't The Menu Background Color Change?
I have created 2 menus:prod & prod2, I find when the mouse focus on prod2, the background color is changed but when the mouse focus on prod1 the background color doesn't change
Solution 1:
I tested your code and it worked! what is your browser? please place a demo and also add this code as well
a.setAttribute('style','background-color:blue');
some browsers have incompatibility with element.style
Solution 2:
give CSS Like this
.arrow_box{ position:absolute; white-space:nowrap}
Check this
Solution 3:
try the below HTML:
<body>
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod</a>
<div class="arrow_box" >
<div class="lay1">
<div><a href="" class="topMenu">Manage Content</a><br><a href="" class="secondMenu"> Message </a></div>
<br><br>
<div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu"> User Inquiry</a></div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);">
<a style="color: red;" href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<div class="lay1">
<div><a href="" class="topMenu">Manage Content</a><br><a href="" class="secondMenu"> Message </a><br><a href="" class="secondMenu"> Help </a></div>
<br><br>
<div><a href="" class="topMenu">Manage Assignment</a><br><a href="" class="secondMenu"> User Inquiry</a></div>
</div>
</div>
</li>
</ul>
<br/><br/><br/><br/><br/>
Test
</body>
Solution 4:
Please check your HTML :
Because you execute same function for both Pord or Pord2 but the Inner html is different for both li. so function showMenu() works different for both Pord or Pord2:
HTML:
<ul class="hMenu">
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
<a href="" class="topMenu">Manage Content</a><br>
<a href="" class="secondMenu"> Message </a>
</div>
<br />
<br />
<div>
<a href="" class="topMenu">Manage Assignment</a><br>
<a href="" class="secondMenu"> User Inquiry</a></div>
</div>
</div>
</li>
<li onmouseover="showMenu(this);" onmouseout="hideMenu(this);"><a style="color: red;"
href="javascript:void(0);">prod2</a>
<div class="arrow_box">
<br />
<div class="lay1">
<div>
<a href="" class="topMenu">Manage Content</a><br>
<a href="" class="secondMenu"> Message </a>
<br>
<a href="" class="secondMenu"> Help </a>
</div>
<br />
<br />
<div>
<a href="" class="topMenu">Manage Assignment</a><br>
<a href="" class="secondMenu"> User Inquiry</a></div>
</div>
</div>
</li>
</ul>
UPDATED
Put <br /> before arrow_box div for both li and some change into 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="";
}
Post a Comment for "Why Doesn't The Menu Background Color Change?"