CODEWITHSUNDEEP
htmlcss
D. WONG
D. WONG

Reputation: 59

Submenu items do not stay on hover

The submenu items do not stay there upon hover. Upon hovering Portals for example, the ul displays, but does not stay there when I want to move down to click on it.

JS fiddle here: http://jsfiddle.net/42qg5/2

HTML

<div id="menu">
<div class="container">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">About SRJC</a>
    </li>
    <li><a href="#">Admission</a>
    </li>
    <li><a href="#">The SR Programmes</a>
    </li>
    <li><a href="#">CCAs</a>
    </li>
    <li><a href="#">Portals</a>

        <ul class="submenu">
            <li><a href="#">ASPIRE</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Staff & Parents</a>
    </li>
  </ul>
</div>
</div>

Upvotes: 0

Views: 249

Answers (2)

Joeytje50
Joeytje50

Reputation: 19122

To fix this, you need to set your padding on your #menu li a to 10px 20px 14px 20px; instead, giving you the code:

#menu li a { 
    display: inline;
    padding: 10px 20px 14px 20px;
    margin: 0;
    color: #fff;
    text-decoration: none;
}

To explain why this work, I first need to explain why this is going wrong in the first place.

You trigger the opening of the submenus by displaying it when the parent <li> is hovered over. This <li>'s child <a> has a set padding, but that padding does not stretch out the entire height of the parent menu <ul> element. Because of that, there's a tiny bit of space between the <a> and the submenu <ul>, which causes the submenu to collapse again when you try to hover over it: it has to move over just a tiny bit of space.

The increasing of the bottom padding then fixes this because it takes up that tiny bit of space between the <li> and the submenu <ul>.

Upvotes: 2

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

First of all you don't need to use opacity:0 when you are using display:none, Secondly the ul doesn't stay because if you notice carefully there is a gap between the parent li and submenu. Overlapping submenu over the parent li at least 1px should do the job.

Also remove this 

position: absolute;
top: 40px;

from

#menu ul li ul li {
}

Fiddle

Upvotes: 1

Related Questions