Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Web

Why Doesn't The Menu Background Color Change?

Post a Comment
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

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

Solution 3:

try the below HTML:

<body><ulclass="hMenu"><lionmouseover="showMenu(this);"onmouseout="hideMenu(this);"><astyle="color: red;"href="javascript:void(0);">prod</a><divclass="arrow_box" ><divclass="lay1"><div><ahref=""class="topMenu">Manage Content</a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a></div><br><br><div><ahref=""class="topMenu">Manage Assignment</a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div></div></div></li><lionmouseover="showMenu(this);"onmouseout="hideMenu(this);"><astyle="color: red;"href="javascript:void(0);">prod2</a><divclass="arrow_box"><divclass="lay1"><div><ahref=""class="topMenu">Manage Content</a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a></div><br><br><div><ahref=""class="topMenu">Manage Assignment</a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;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:

<ulclass="hMenu"><lionmouseover="showMenu(this);"onmouseout="hideMenu(this);"><astyle="color: red;"href="javascript:void(0);">prod</a><divclass="arrow_box"><br /><divclass="lay1"><div><ahref=""class="topMenu">Manage Content</a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a></div><br /><br /><div><ahref=""class="topMenu">Manage Assignment</a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div></div></div></li><lionmouseover="showMenu(this);"onmouseout="hideMenu(this);"><astyle="color: red;"href="javascript:void(0);">prod2</a><divclass="arrow_box"><br /><divclass="lay1"><div><ahref=""class="topMenu">Manage Content</a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Message </a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;Help </a></div><br /><br /><div><ahref=""class="topMenu">Manage Assignment</a><br><ahref=""class="secondMenu">&nbsp;&nbsp;&nbsp;&nbsp;User Inquiry</a></div></div></div></li></ul>

Try This

UPDATED

Put <br /> before arrow_box div for both li and some change into Javascript:

var div = obj.children[2];

Javascript - 

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

    functionhideMenu(obj){
                var a=obj.children[0];
                a.style.color="red";
                var div = obj.children[2];          
                div.style.display="none";
                obj.style.backgroundColor="";
            }

Updated Jsfiddle

Post a Comment for "Why Doesn't The Menu Background Color Change?"