CODEWITHSUNDEEP
htmlcssdrop-down-menu
SoftDev
SoftDev

Reputation: 45

How to make drop down menu stay open while hovering

When I am click in the about menu the drop down is not staying open as soon as I stop hoverig on the about menu it disappears. How to make it stay open ?

CSS

#nav-line2 .subMenu{
position:absolute;
z-index:999;
list-style:none;
display:none;
padding-left:441px;
}

#about:hover  + .subMenu , .subMenu:hover {display:block;}

HTML

    <div id="nav-line2" style="float:left">
    <a class="navlink" href="/whatwedo">what we do</a>
    <a class="navlink"   href="/communities">communities</a>
    <a class="navlink"  href="/catalog">gift catalog</a>
    <a class="navlink" href="/studentprofiles">student profiles</a>
    <a class="navlink" id="about" href="/aboutme">about</a>
<div class="subMenu">
    <li><a class="navlink" href="/about">Board of Directors</a></li>
    <li><a class="navlink" href="/accesgovernance">Structure & Governance</a></li>
    </div>
    <a class="navlink" href="/termsconditions" style="padding-left:10px">terms &amp; conditions</a>
</div>

Upvotes: 0

Views: 1863

Answers (1)

Banana
Banana

Reputation: 7463

here is how you do it: FIDDLE

3 things to notice:

1) <li> is supposed to be an element of <ul> and not <div>

2) easiest way to align the submenu to the relevant parent menu is to make him a direct child of that parent menu, and set parent position to relative and child's to absolute, that way when you set child left to 0 it will alight perfectly.

3) easiest way to make a menu bar is by using a user list <ul> and setting its list items' display to inline to make it horizontal.

Upvotes: 1

Related Questions