下拉菜單在不可見鏈接的位置有一個間隙

Question

我的導航欄有一個下拉菜單。 當您通過導航欄中的主要鏈接之一進行 hover 時，將會出現 3 個鏈接。

我的問題：當這 3 個鏈接不可見時，它們仍然存在於我的ul元素中（只是不可見）。 這意味着我的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>

Answer 1

基本上有兩種方法可以用 CSS 隱藏一些東西：

visibility: hidden;
display: none;

可見性：隱藏將隱藏元素，但保留它占用的任何空間。 display: none 將隱藏該元素，並且“收縮包裝”所有內容都圍繞它，就好像該元素從一開始就不存在一樣。

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