悬停主菜单按钮时链接发生变化？

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 并在底部全部关闭它们时，我发现它有点工作，但它仍然无法正常工作。当您悬停第 6 个按钮时，它认为您正在悬停所有按钮并尝试显示所有菜单。

您能帮我弄清楚我做错了什么以及如何解决这个问题吗？

如果有人可以帮助我，非常感谢。我在这件事上停留了一段时间！
问候，
橘子。

Answer 1

我会简单地使用您的 HTML，而不会尝试将主按钮与子菜单联系起来。这不是必需的。您可以简单地为每个子菜单创建一个 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>

这有点低俗，但希望它是有意义的，并能推动你前进。