Hello guys! im new and i want to see if someone can help me.

Im making a dropdown menu with divs hidden, the thing is, when the mouse is over a button the id changes so the background becames white and the text blue, and the hidden div appears with it's content, we are fine until here, but my issue begins when i move the mouse over the new div, the button returns to it's original id, and i want it to remain in the "hover" id.

 

Here is the code:

 

CSS:

#cergen a:link{display:inline-block;height:20px;float: right;text-align:center;padding: 2px 5px 0 5px;margin: 0 0 0 10px;text-decoration: none;font-size:12px;color:#FFF;}

#cergen a:visited{display:inline-block;height:20px;float: right;text-align:center;padding: 2px 5px 0 5px;margin: 0 0 0 10px;text-decoration: none;font-size:12px;color:#FFF;}

#cergen a:hover{display:inline-block;height:20px;float: right;text-align:center;padding: 2px 5px 0 5px;margin: 0 0 0 10px;text-decoration: none;font-size:12px;color:#0059C4;background-color:#FFF;}

#cergen a:active{display:inline-block;height:20px;float: right;text-align:center;padding: 2px 5px 0 5px;margin: 0 0 0 10px;text-decoration: none;font-size:12px;color:#0059C4;background-color:#FFF;}

 

#div1 {

position:absolute;

width:150;

visibility:hidden;

margin-left: 90px;

}

 

 

JAVA:

function toggleDiv(id,flagit) {

if (flagit=="1"){

if (document.layers) document.layers[''+id+''].visibility = "show"

else if (document.all) document.all[''+id+''].style.visibility = "visible"

else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"

}

else

if (flagit=="0"){

if (document.layers) document.layers[''+id+''].visibility = "hide"

else if (document.all) document.all[''+id+''].style.visibility = "hidden"

else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"

}

}

 

HTML:

<div id="cergen"><a href="#" onmouseover="toggleDiv('div1',1)" onmouseout="toggleDiv('div1',0)">Cergen</a></div>

<div align="center" id="div1" onmouseout="this.style.visibility='hidden'" onMouseOver="this.style.visibility='visible'">

<div id="sub-menu-contenedor">

fede<br/>

fede<br/>

fede<br/>

fede<br/>

</div>

</div>

I brought this and just modify it everytime I need a drop down menu, works a treat everytime!

 

http://codecanyon.net/item/css-3-drop-down-menu-5-different-colors-scheme/110113?WT.ac=search_thumb&WT.seg_1=search_thumb&WT.z_author=playlab?ref=ashwhitehair

Not sure if it matters but I do not change ID's on things like this but change Class instead. I usually add and remove a class from an element. So the initial class would be class="mouseout" and then hover over it change the class to class="mouseover" or whatever you want. May not matter changing IDs but I think changing class is more common.

 

Also, I use JQuery to do simple hover effects and change classes and styles, I think this is easier to code, although will add an extra file to download.

Edited February 13, 201214 yr by AmityWeb