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.

enter image description here

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

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -