下拉菜單有一個不可見鏈接的差距

我有一個導航欄的下拉菜單。當您將鼠標懸停在導航欄中的其中一個主要鏈接上時，會顯示3條鏈接。下拉菜單有一個不可見鏈接的差距

我的問題：當這3個鏈接不可見時，它們仍然存在於我的ul元素中（只是不可見）。這對於那些隱藏的鏈接來說，在我的空間上存在很大的差距。我如何消除這種差距？

我曾嘗試將隱藏的鏈接z-index設置爲非常高，但當下拉菜單不可見時它仍然沒有消除間隙。

我的代碼：

// My CSS 
.moreInfoLi  { z-index: 50; } 
.hidden   { visibility: hidden; } 
.unHidden  { visibility: visible; z-index: 50; } 

// My Javascript: Drop Down Links Specific 
function onHover(divID) 
{ 
    var div = document.getElementById(divID); 
    if (div) { div.className = "unHidden"; } 
} 

function onLeave(divID) 
{ 
    var div = document.getElementById(divID); 
    if (div) { div.className = "hidden"; } 
} 

// The HTML nav bar 
<div id="main"> 
    <div id="navBar"> 
     <ul id="navLinks"> 
      <li><a href="">Home</a></li> 
      <li class="moreInfoLi"> 
       <a href="" onmouseover="onHover('aboutUsSubList')" onmouseout="onLeave('aboutUsSubList')">About Us</a> 
       <div id="aboutUsSubList" class="hidden" onmouseover="onHover('aboutUsSubList')" onmouseout="onLeave('aboutUsSubList')"> 
        <ul> 
         <li><a href="">Philosophy</a></li> 
         <li><a href="">Learning Environment</a></li> 
         <li><a href="">Waiting List</a></li> 
         <li><a href="">Food and Nutrition</a></li> 
        </ul> 
       </div> 
      </li> 
      <li><a href="">Our Team</a></li> 
     </ul> 
    </div> 
</div>

來源

2011-07-08 Mack

基本上有2種方式來隱藏着什麼用CSS：

visibility: hidden; 
display: none;

visibility：hidden的將隱藏元素，但保留任何空間，它佔去了。 display：none將隱藏該元素，並且「收縮包裝」將它包圍，就好像該元素從未存在過。

http://www.w3schools.com/css/css_display_visibility.asp

來源

2011-07-08 05:18:25

下拉菜單有一個不可見鏈接的差距

回答

相關問題