Sub-menus overlapping main menu items

Question

I'm at a loss trying to fix this. I made a drop down menu and it's functioning properly, but the sub-menus are appearing above the main menu. I've tried fiddling around with z-index, but I can't figure it out. (I'm very much a novice so I apologize if my code is messy).

Here is a JSFiddle: https://jsfiddle.net/jpyaz84L/

The sub-menu ul is supposed to drop down from beneath the main menu items and fade in.

HTML

<ul id="nav">
  <li class="main"><a href="http://www.google.com">Main Item</a>
    <ul>
      <li class="sub"><a href="http://www.google.com">Sub 1</a></li>
      <li class="sub"><a href="http://www.google.com">Sub 2</a></li>
    </ul>
  </li>
</ul>

CSS

ul#nav {
  position:relative;
  display: inline; 
  list-style-type: none;
  font-family: Helvetica;  
  padding: 15px 5px 15px 0;
}
li.main {
  position: relative;
  width: 250px;
  font: 14px Roboto;
  display: inline-block;
  background: #eef4ff;
  margin-right: -4px;
  cursor: pointer;
  z-index: 1;
  -webkit-transition: all 0.2s;
}
li.main a {
  display: block;
  padding: 15px 90px;
  color: inherit;
  text-decoration: none;
}
li.main:hover {
  background: #548cff;
  color: #FFFFFF;
}
li.main ul {
  position: absolute;
  top: 0px;
  left:-40px;
  display: block;
  list-style-type: none;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
li.main:hover ul {
  top: 47px;
  visibility: visible;
  display: block;
  opacity: 1;
  -webkit-transition: all 1s;
}
li.sub {
  width: 225px;
  background: #6F6F6F;  
  color: #F0F0F0;
  opacity: .985;
}
li.sub a {
  background:inherit;
  color: inherit;
  display: inline-block;
  padding: 17px 90px;
  text-decoration:none;
}
li.sub:hover { 
  background: #888888; 
  color: #FFFFFF;
}

http://stackoverflow.com/questions/1806421/css-parent-element-to-appear-above-child I tried this on yours and it worked. — Cobertos, May 15 '15 at 23:14
Unlike forum sites, we don't use "Thanks", or "Any help appreciated", or signatures on [so]. See "[Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?](http://meta.stackexchange.com/questions/2950/should-hi-thanks-taglines-and-salutations-be-removed-from-posts). BTW, it's "Thanks in advance", not "Thanks in advanced". — John Saunders, May 24 '15 at 22:54

score 0 · Answer 1 · edited May 23 '17 at 12:21

0

ul#nav
{
    /* No z-index */
}
li.main ul
{
    /* Negative z-index */
    z-index:-1;
}

You need to take the z-index off of the parent ul and give the child ul a negative z-index (you were almost there :D )

Working example with your code: https://jsfiddle.net/jpyaz84L/1/

Source: How to get a parent element to appear above child

edited May 23 '17 at 12:21

Community

1
1

answered May 15 '15 at 23:17

Cobertos

1,953
24
43

Thanks so much! I'm running into the same problem where the content body elements are now overlapping the sub-menu. Other than setting everything in the content body to be like "z-index: -10", you know of any solutions? :) – Caleb Whittington May 15 '15 at 23:43
Adding a wrapper with a higher z-index than it's siblings works. https://jsfiddle.net/jpyaz84L/2/ – Cobertos May 15 '15 at 23:47
Thank you again masked stranger! I tried that but didn't think to add "position: relative!" – Caleb Whittington May 16 '15 at 04:40

Sub-menus overlapping main menu items

1 Answers1