Links changing when hovering Main menu buttons? - php

Question

So, I have a main menu bar on my website and a "submenu" bar just underneath. The submenu bar is currently not linked at all to the main menu bar (I mean by this, on any page that you are, the submenu bar is the same).
This is what it looks like: (sorry for the ugly paint skills)
Anyway, I'm trying to make the links in the submenu bar change when you hover one of the big buttons of the main menu.
This is what I tried in my html:
<div id = 'nav'>
<div id = 'hovermenu1'>
<div class = 'button-accueil'></div>
<div id = 'menu1'>
Link 1
Link 2
Link 3
</div>
</div>
<div id = 'hovermenu2'>
<div class = 'button-guide'></div>
<div id = 'menu2'>
Link 1
Link 2
Link 3
</div>
</div>
[...] <!-- And we go on like this until hovermenu6 -->
<div id = 'hovermenu6'>
<div class = 'button-contact'></div>
<div id = 'menu6'>
Link 1
Link 2
Link 3
</div>
</div>
</div>
And in my css:
#menu1 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
#menu2 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
[...] /* And we go on like this until menu6 */
#menu6 {
background:url(/images/menu.jpg) no-repeat left top;
text-align:center;
display:none;
float:left;
margin-left:16px;
margin-top:2px;
padding-top:9px;
width:700px;
height:33px;
}
#hovermenu1:hover #menu1 {
display: inline;
}
#hovermenu2:hover #menu2 {
display: inline;
}
[...] /* And we go on like this until hovermenu6 */
#hovermenu6:hover #menu6 {
display: inline;
}
This, unfortunately, doesn't work.
I figured out it kinda works when I didn't close all the div id="hovermenu1/2/3/4/5/6 and closed them all at the bottom but it still doesn't work properly at all. When you hover The 6th button, it considers that you are hovering all buttons and it tries to display all menus.
Could you help me figure out what I am doing wrong and how I could fix this please?
Thank you so so much if anyone can help me. I'm stuck on this thing for a while!
Regards,
Orangow.

Answer 1

I would simply your HTML and not try to tie the main buttons to the submenu quite as much. It's not necessary. You can simply make one div for each submenu, and hide all of them except the one that's active. Then use JavaScript to capture the hover event for each main menu item, and hide/show the submenu as necessary. For instance:
<div id="main1">Button</div><div id="main2">Button2</div><div id="main3">Button3</div>
<div id="sub1" style="display:none;">Link 1Link 2Link 3</div>
<div id="sub2" style="display:none;">Link 1Link 2Link 3</div>
<div id="sub3" style="display:none;">Link 1Link 2Link 3</div>
<script>
$(document).ready(function(){
$('#main1').hover(function(){ $('#sub1').show(); $('#sub2').hide(); $('#sub3').hide(); },
function(){ $('#sub1').hide(); }
$('#main2').hover(function(){ $('#sub2').show(); $('#sub1').hide(); $('#sub3').hide(); },
function(){ $('#sub2').hide(); }
$('#main3').hover(function(){ $('#sub3').show(); $('#sub2').hide(); $('#sub1').hide(); },
function(){ $('#sub3').hide(); }
});
</script>
This is kind of down-and-dirty, but hopefully, it makes sense and moves you along.