ドロップダウンメニューには、目に見えないリンクがある隙間があります

Question

ナビゲーションバーのドロップダウンメニューがあります。ナビゲーションバーのメインリンクの1つにカーソルを合わせると表示される3つのリンクがあります。

問題：3つのリンクが表示されていない場合でも、私のul要素に表示されています（表示されていません）。私の中に大きな差があります。ulこれらの隠れたリンクのためのスペースを節約します。このギャップを取り除くにはどうすればいいですか？

私は隠しリンクのZ-インデックスを非常に高く設定しようとしましたが、ドロップダウンメニューが見えなくなってもまだギャップを削除していません。

マイコード：

// 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> 

Answer 1

基本的にCSSで何かを隠すための2通りの方法があります。

visibility: hidden; 
display: none; 

は可視性：隠された要素を隠し、それが取り上げたものは何でもスペース保持されます。 display：noneは要素を隠し、 "shrink wrap"はすべての要素があたかも最初に存在しなかったかのように囲みます。

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