CODEWITHSUNDEEP
csscss-position
nightmare
nightmare

Reputation: 15

Why z-index isn't working in this menu?

I'm using position:relative; for parent ul and position:absolute; for child ul(.submenu) but still z-index isn't working for me. What's wrong with my css?

I want .submenu to hide behind main menu(.mynav).

HTML

<div class="mynav">
  <ul>
    <li><a href="#about"><span>About</span></a></li>
    <li><a href="#contact"><span>Contact</span></a></li>
    <li>
      <a href="#home"><span>Home</span></a>
      <ul class="submenu">
        <li><a href="#tf"><span>Menu Item</span></a></li>
        <li><a href="#cc"><span>Menu Item</span></a></li>
        <li><a href="#aj"><span>Menu Item</span></a></li>
        <li><a href="#vh"><span>Menu Item</span></a></li>
      </ul>
    </li>
    <li><a href="#social"><span>Social</span></a></li>
    <li><a href="#promote"><span>Promote</span></a></li>
  </ul>
</div>
<div class="content">
  Lorem ipsum
</div>

CSS:

.mynav{
  background: #202020;
  text-transform: uppercase;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  width: 100%;
  text-align:center;
  z-index:9999;
}
a{
  text-decoration:none;
  color: #f91d65;
  color: #fff;
  padding: 15px 30px;
  display:block;
}
.mynav ul{
  z-index:999;
}
.mynav ul li{
  border-left: 1px solid rgba(255, 255, 255, 0.50);
  display: inline-block;
  margin-right: -4px;
  position: relative;
}
.mynav ul li a span{
  display: block;
}
.mynav .submenu{
  position: absolute;
  white-space: nowrap;
  left:0;
  top:50%;
  z-index:99;
}
.mynav .submenu > li{
  display: inline-block;
  background: #999;
}
 .mynav .submenu > li a span{
  display: block;
}

Demo:

http://codepen.io/sonu/pen/gbpmbj

Upvotes: 0

Views: 103

Answers (2)

Freek Gille
Freek Gille

Reputation: 51

If you add this:

 .mynav ul li a {
  position: relative;
  z-index:999;
  background: black;
}

And a lower z-index on .mynav .submenu > li a

Upvotes: 0

shadeed9
shadeed9

Reputation: 1826

You can make the submenu appear under the main one by adding the following code:

.mynav .submenu{
  z-index:-1;
}

Upvotes: 1

Related Questions