black_belt black_belt - 3 months ago 10
CSS Question

Making sub menu item appear over divs that are positioned to absolute

I am trying to create vertical menu using CSS. When I hover over a sub menu item, half of it's child menu do not show up. Please see the image below:

enter image description here

May be its happening because the div in blue background and the div that containing the menu, both are positioned to absolute. You can see the code live here: https://jsfiddle.net/02vc01cw/2/

Could you please tell me how to make the sub menu appear properly ?
Thanks in advance.

Here's my code:



#bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
background-color: #437DCC;
}
#drawer {
z-index: 2;
overflow: hidden;
height: 100%;
width: 270px !important;
position: absolute;
overflow: hidden;
}
#gnavi-links > ul {
list-style-type: none;
background: #fff;
}
#gnavi-links > ul > li {
margin-bottom: 10px;
}
#gnavi-links > ul > li > a {
display: block;
height: 40px;
line-height: 40px;
color: #1a1a1a;
font-family: 'Calibre-Bold', sans-serif;
font-weight: bold;
letter-spacing: 0.25em;
text-transform: uppercase;
}
#gnavi-links > ul > li > ul {
list-style-type: none;
margin-left: -50px;
margin-right: 5px;
}
#gnavi-links > ul > li> ul > li > a {
font-size: 13px;
display: block;
padding: 5px 16px;
color: #1a1a1a;
text-decoration: none;
letter-spacing: 0.20em;
text-transform: uppercase;
}
#gnavi-links > ul > li> a:hover {
color: #19a69a;
}
#gnavi-links > ul > li> ul > li a:hover {
background-color: #5A5959;
color: #fff;
}
#gnavi-links > ul > li> ul > li ul {
display: none;
}
#gnavi-links > ul > li> ul > li:hover ul {
position: absolute;
display: block;
background: #999;
margin-left: 170px;
margin-top: -25px;
}
#gnavi-links > ul > li> ul > li > ul > li {
width: 150px;
}

<div id="drawer">
<nav class="drawer-nav" id="gnavi-links" role="navigation">
<ul>
<li><a>Menu Item</a></li>
<li>
<a>Menu Item</a>
<ul>
<li><a>Sub Menu Test 1</a></li>
<li>
<a>Sub Menu Test 2</a>
<ul>
<li><a>Sub Menu Test 1</a></li>
<li><a>Sub Menu Test 2</a></li>
<li><a>Sub Menu Test 3</a></li>
</ul>
</li>
<li><a>Sub Menu Test 3</a></li>
</ul>
</li>
<li><a>Menu Item</a></li>
</ul>
</nav>
</div>
<div id="bg">
</div>




Answer

That's because of overflow:hidden in your code, remove it and it will work:

#bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: #437DCC;
}
#drawer {
    z-index: 2;   
    height: 100%;
    width: 270px !important;
    position: absolute;
}
#gnavi-links > ul {
    list-style-type: none;
    background: #fff;
}
#gnavi-links > ul > li {
    margin-bottom: 10px;
}
#gnavi-links > ul > li > a {
    display: block;
    height: 40px;
    line-height: 40px;
    color: #1a1a1a;
    font-family: 'Calibre-Bold', sans-serif;
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}
#gnavi-links > ul > li > ul {
    list-style-type: none;
    margin-left: -50px;
    margin-right: 5px;
}
#gnavi-links > ul > li> ul > li > a {
    font-size: 13px;
    display: block;
    padding: 5px 16px;
    color: #1a1a1a;
    text-decoration: none;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}
#gnavi-links > ul > li> a:hover {
    color: #19a69a;
}
#gnavi-links > ul > li> ul > li a:hover {
    background-color: #5A5959;
    color: #fff;
}
#gnavi-links > ul > li> ul > li ul {
    display: none;
}
#gnavi-links > ul > li> ul > li:hover ul {
    position: absolute;
    display: block;
    background: #999;
    margin-left: 170px;
    margin-top: -25px;    
}
#gnavi-links > ul > li> ul > li > ul > li {
    width: 150px;
}
<div id="drawer">
   <nav class="drawer-nav" id="gnavi-links" role="navigation">
      <ul>
         <li><a>Menu Item</a></li>
         <li>
            <a>Menu Item</a>
            <ul>
               <li><a>Sub Menu Test 1</a></li>
               <li>
                  <a>Sub Menu Test 2</a>
                  <ul>
                     <li><a>Sub Menu Test 1</a></li>
                     <li><a>Sub Menu Test 2</a></li>
                     <li><a>Sub Menu Test 3</a></li>
                  </ul>
               </li>
               <li><a>Sub Menu Test 3</a></li>
            </ul>
         </li>
         <li><a>Menu Item</a></li>
      </ul>
   </nav>
</div>
<div id="bg">
</div>

Comments