Show/hide element[Java]

[chabuya]

Hey there,
I want a div element only to show when you hover over an anchor of the main menu.
The problem is: This div is not a child of the menu, so i can't do it through simple hover and display css functions.

http://imgur.com/RNvsG.png
That's the menu.

http://imgur.com/r2KYQ.png
This is what should appear when you're hovering one of the items.
Also, I want a different div for the different menu anchors, because I dont think wordpress can read the category by a hover. And, if this wasn't enough, I have no idea how to build this so you can actually from the menu anchor to the subnav without it disappearing when you're not above the anchor.

I already tried hundreds of show/hide scripts, solving this via css but nothing works for me.
I'd be grateful for any suggestions.

Thanks in advance,
Kevin

[Moderator edit - No signatures / advertising for non-established members.]

[pricey_uk]

Could you try something like...


<a href="wherever" onmouseover="document.getElementById('div').style.display=''"
onmouseout="document.getElementById('div').style.display='none'">Free Resources</a>

Give the div an id and used the id name in place of the red 'div' in the code above. If you don't want the div to disappear when you move the mouse cursor away, you can just remove the onmouseout event.

Because you have a number of menu items, it may actually be better to create a function to show/hide the correct div...



<script type="text/javascript">
function toggleDivs(showDivId){
var div1 = "none";
var div2 = "none";
var div3 = "none";
var div4 = "none";

switch(showDivId){
case 'div1': div1 = ""; break;
case 'div2': div2 = ""; break;
case 'div3': div3 = ""; break;
case 'div4': div4 = ""; break;
}

document.getElementById('div1').style.display=div1;
document.getElementById('div2').style.display=div2;
document.getElementById('div3').style.display=div3;
document.getElementById('div4').style.display=div4;
}
</script>
<div id="div1" style="display: none">Free Resources</div>
<div id="div2" style="display: none">Graphic Design</div>
<div id="div3" style="display: none">Photography</div>
<div id="div4" style="display: none">Tutorials</div>
<a href="wherever" onmouseover="toggleDivs('div1')">Free Resources</a>[/
<a href="wherever" onmouseover="toggleDivs('div2')">Graphic Design</a>[/
<a href="wherever" onmouseover="toggleDivs('div3')">Photography</a>[/
<a href="wherever" onmouseover="toggleDivs('div4')">Tutorials</a>

This will bascially hide all divs except for the one whose id you pass to the function. The divs should remain visible until another menu item is hovered.

p.s. I've not