CSS下拉子菜单不会隐藏

Posted 2023-02-16

【中文标题】CSS下拉子菜单不会隐藏

【英文标题】：CSS Drop Down submenu won't hide

【发布时间】：2012-07-03 17:49:11

【问题描述】：

我试图让我的子菜单在光标位于菜单项上时出现，当您转到另一个菜单选项时，新的子菜单会替换另一个，但现在第一个子菜单选择停留在屏幕上，永远不会消失，当您转到另一个菜单选项时，另一个子菜单出现在第一个菜单下...有人可以帮我吗？谢谢你！

html:

     <div id="menu">
<div class="menu" id="menu1" onmouseover="affiche(this)"><a href="#.html">   MENU1 </a>
    <div class="sousmenu" id="sousmenu1" style="display:none" onmouseout="affiche(this)">
        <div><a href="#.html">SOUSMENU11</a></div>
        <div><a href="#.html">SOUSMENU12</a></div>
        <div><a href="#.html">SOUSMENU13</a></div>
        <div><a href="#.html">SOUSMENU14</a></div>

    </div>
</div>
<div class="menu" id="menu2" onmouseover="affiche(this)"><a href="#.html">MENU2</a>
    <div class="sousmenu" id="sousmenu2" style="display:none" onmouseout="affiche(this)">
        <div><a href="#.html">SOUSMENU21</a></div>
        <div><a href="#.html">SOUSMENU22</a></div>
        <div><a href="#.html">SOUSMENU23</a></div>
        <div><a href="#.html">SOUSMENU24</a></div>
        <div><a href="#.html">SOUSMENU25</a></div>

    </div>
</div>
<div class="menu" id="menu3" onmouseover="affiche(this)"><a href="#.html">MENU3</a>
    <div class="sousmenu" id="sousmenu3" style="display:none" onmouseout="affiche(this)">
        <div><a href="#.html">SOUSMENU31</a></div>
        <div><a href="#.html">SOUSMENU32</a></div>
        <div><a href="#.html">SOUSMENU33</a></div>
        <div><a href="#.html">SOUSMENU34</a></div>
    </div>
</div>
<div class="menu" id="menu4"><a href="#">MENU4</a></div>
<div class="menu" id="menu4"><a href="#">MENU5</a></div>
<div class="menu" id="menu5"><a href="#">MENU6</a></div>
<div class="menu" id="menu6"><a href="#">MENU7</a></div>

CSS：

    #menu
margin:0px 0 0 9px;
background:#50626c;
color:#fff;
float:left;
display:inline;
    #menu div
width:234px;
text-align:center;
     .menu
position:relative;
    #menu div a:link, #menu div a:visited, #menu div a:hover
color:#fff;
font-family:arial,sans-serif;
font-size:14px;
text-decoration:none;
padding-top:7px;
height:28px;
display:block;
    #menu div a:link, #menu div a:visited
background:url(BG.jpg) no-repeat;
    #menu div a:hover, #menu div a:active, #menu div a:focus
background:#4172CB ;
text-decoration: underline;
     .sousmenu
position:absolute;
left:234px;
top:0;

js

function affiche(obj)
    var id = obj.id;

    for(var i = 1; i <= 2; i++)
            document.getElementById('sousmenu'+i).style.display = "none";
    

    if(document.getElementById('sous'+id))
            document.getElementById('sous'+id).style.display = "block";
    

【参考方案1】：

我认为您将它们全部设置为 for 循环，然后忽略 if 语句。尝试将 if 语句放在 for 循环中，并为其他元素添加 else 以显示为 none。此外，还有一种方法可以只使用 CSS 悬停而不需要您可能想要查看的 javascript。这个网站上的主要导航（关于/投资组合/联系方式/附加）就是这样做的，只有 CSS：http://www.visionspark.com

但这里是调整代码的方法：

for(var i = 1; i <= 2; i++)
    if(document.getElementById('sous'+id))
        document.getElementById('sous'+id).style.display = "block";
     else 
        document.getElementById('sousmenu'+i).style.display = "none";