html - Submenu items partially hidden menu container -
i have fixed menubar on page submenu items partially visible because part of submenu getting under container of parent menu.

this happens ie not firefox or chrome.
what wrong?
structure:
<div class="site-branding menu"> <div class="row "> <div class="col-xs-10 menu-bar"> <nav class="main-navigation" id="site-navigation" role="navigation"> <div class="menu-mnu-1-container"> <ul class="menu" id="menu-mnu-2"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"> <a href="#">frontpage</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"> <a href="#">page 1</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-25 current_page_item menu-item-has-children menu-item-30"> <a href="#">page 2</a> <ul class="sub-menu"> <li><a href="#">subpage 1</a></li> <li><a href="#">subpage 2</a></li> </ul> </li> </ul> </div> </nav> </div> </div> css:
.main-navigation li { float: left; position: relative; } .site-branding { top: 40px !important; border-bottom: 0 !important; } .site-branding { width: 100%; position: fixed; top: 40px; height: 80px; left: 0px; z-index: 99; border-bottom: 1px solid rgb(240, 240, 240); } .menu.site-branding { height: 50px !important; top: 80px !important; padding-bottom: 20px !important; z-index: ; z-index: 9999; } .site-branding .row { height: 100%; line-height: 80px; overflow: initial; } .col-xs-10 { width: 83.33%; } .site-branding .row [class*='col-'] { height: 100% !important; line-height: 30px !important; } .site-branding .row [class*='col-'], .site-title { height: 100%; line-height: 80px; } .main-navigation { clear: both; display: block; float: left; width: 100%; } .main-navigation { border: 1px solid #cdcdcd !important; border-radius: 5px !important; margin: 10px 0 0 0 !important; } .menu-mnu-1-container { position: relative !important; text-align: left !important; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0px; } .main-navigation ul.menu { margin: 0 !important; padding-left: 0px !important; position: relative !important; } .main-navigation#site-navigation .menu { float: right; } .menu ul li { margin: 0 3px !important; padding: 0 7px !important; } .main-navigation { display: block; text-decoration: none; } .main-navigation ul ul { width: 240px !important; } .main-navigation#site-navigation li { padding: 0 10px; color: #000; } .main-navigation ul ul { display: none; float: left; left: 0px; position: absolute; z-index: 9; padding: 0 0 0 10px; } .main-navigation ul ul li { line-height: initial; line-height: 30px; } .menu ul li ul li { margin: 0 !important; padding: 0 !important; }
try adding
ul.submenu { z-index: 100; } to stylesheet
Comments
Post a Comment