CSS Drop Down子菜單不會隱藏

我想讓我的子菜單在光標位於菜單項上時出現，而當您轉到另一個菜單選項時，新子菜單將替換另一個子菜單，但現在第一個子菜單選擇停留在屏幕上，永遠不會消失，當你去另一個菜單選項時，另一個子菜單會出現在第一個子菜單下面...有人能幫助我嗎？謝謝！CSS Drop Down子菜單不會隱藏

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;}

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"; 
    } 

}

來源

2012-07-03 Anne-Marie Cadrin

我想你設定他們都在for循環，它的無視如果後來發表聲明。嘗試將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"; 
    } 
}

來源

2012-07-03 20:09:00

CSS Drop Down子菜單不會隱藏

回答

相關問題