鏈接在懸停主菜單按鈕時發生變化？

Question

因此，我在我的網站上有一個主菜單欄，並在下面有一個「子菜單」欄。子菜單欄當前沒有鏈接到主菜單欄（我的意思是，在任何頁面上，子菜單欄都是相同的）。

這是什麼樣子：（抱歉醜陋的油漆技能）

無論如何，我想，當你將鼠標懸停在主要的大按鈕中的一個，使在子菜單欄變化的聯繫菜單。

這是我在我的html嘗試：

<div id = 'nav'> 

    <div id = 'hovermenu1'> 
     <a href="/accueil"><div class = 'button-accueil'></div></a> 
      <div id = 'menu1'> 
        <a href="">Link 1</a> 

        <a href="">Link 2</a> 

        <a href="">Link 3</a> 

      </div> 
    </div> 

    <div id = 'hovermenu2'> 
     <a href="/guide"><div class = 'button-guide'></div></a> 
      <div id = 'menu2'> 
        <a href="">Link 1</a> 

        <a href="">Link 2</a> 

        <a href="">Link 3</a> 

      </div> 
    </div> 

    [...] <!-- And we go on like this until hovermenu6 --> 


    <div id = 'hovermenu6'> 
     <a href="/support"><div class = 'button-contact'></div></a> 
      <div id = 'menu6'> 
        <a href="">Link 1</a> 

        <a href="">Link 2</a> 

        <a href="">Link 3</a> 

      </div> 
    </div> 
</div> 

而且在我的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; 
} 

很不幸，不能正常工作。
當我沒有關閉所有的div id="hovermenu1/2/3/4/5/6並將它們全部關閉在底部但我仍然無法正常工作時，我發現它有點不妥。當您懸停第六個按鈕時，它會認爲您在懸停所有按鈕，並嘗試顯示所有菜單。

你能幫我弄清楚我做錯了什麼，我該如何解決這個問題？

非常感謝你，如果有人能幫助我。我被困在這件事上一段時間了！
Regards，
Orangow。

Answer 1

我只是簡單的你的HTML，而不是試圖將主按鈕與子菜單相當。這不是必需的。您可以簡單地爲每個子菜單製作一個div，然後隱藏除活動之外的所有這些div。然後使用JavaScript捕獲每個主菜單項的懸停事件，並根據需要隱藏/顯示子菜單。例如：

<div id="main1">Button</div><div id="main2">Button2</div><div id="main3">Button3</div> 
<div id="sub1" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div> 
<div id="sub2" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div> 
<div id="sub3" style="display:none;"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></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> 

這是一種骯髒，但希望，它是有道理的，讓你感動。