CODEWITHSUNDEEP
css
Martin
Martin

Reputation: 27

Items in drop down menu are not visible

Can somebody tell me, how can I fix the drop down menu? Some items are not visible, because menu is on the two lines and the second line hidden items in drop down menu. I think that good solution will be with css code, but I dont know how.

screenshot

Upvotes: 0

Views: 62

Answers (2)

frnt
frnt

Reputation: 8795

Add z-index and top properties to ul.sub-menu which fades in on-hover,

Update - Just by changing z-index as suggested by Praveen Kumar works. So if you add top property to ul.sub-menu will somewhere break your structure.

z-index : The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

.navbar-inverse .navbar-nav ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    background: #fff;
    width: 200px;
    box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08);
    top: 35px; /*Add this*/
    z-index: 9; /*Add this*/
}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167210

It is a z-index issue, you haven't specified the z-index for the sub-menu. The fix is to add the following CSS to set the z-index to the sub-menu:

.navbar-inverse .navbar-nav li:hover > ul.sub-menu {
  z-index: 9999;
}

Preview

working

Upvotes: 0

Related Questions