CODEWITHSUNDEEP
javascripthtmlcss
Mack
Mack

Reputation: 47

Drop Down Menu has a gap where the non-visible links are

I have a drop down menu for my nav bar. There are 3 links that are meant to appear when you hover over one of the main links in the navbar.

My Problem: when those 3 links are not visible they are still there in my ul element(just not visible). Which emans there is a big gap in my ul saving space for those hidden links. How do I remove this gap?

I have tried setting the hidden links z-index to very high but it still doesn't removedthe gap when the drop down menu is invisible.

My code: 

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

Upvotes: 1

Views: 141

Answers (1)

ElonU Webdev
ElonU Webdev

Reputation: 2459

There are basically 2 ways to hide something with CSS:

visibility: hidden;
display: none;

visibility: hidden will hide the element, but preserve whatever space it took up. display: none will hide the element, and "shrink wrap" everything surround it as if the element never existed in the first place.

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

Upvotes: 3

Related Questions