CODEWITHSUNDEEP
htmlcssdrop-down-menuhtml-listsz-index
Paola Soto
Paola Soto

Reputation: 17

Child ul behind parent ul in css

I'm trying to make my dropdown menu with pure css3 but my child ul keeps showing on top of the parent. I've tried with z-index -100, removing the positive z-index value from the parent ul, but nothing happens.

This is my code:

http://jsfiddle.net/z9kCx/

Upvotes: 0

Views: 182

Answers (1)

The Spirit of Gordon Bombay
The Spirit of Gordon Bombay

Reputation: 317

I've updated your fiddle here. Would that work?

I added menu and sub-menu classes to your uls and edited your css a bit:

ul.menu li {
   position: relative;
   width: 100px;
   float: left;
   background: #2A2A2A;
   text-align: center;
   font-size: 14px;
   padding: 15px;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   list-style-type: none;
}

ul.sub-menu {
    padding: 0;
    position: absolute;
    top: 45px;
    left: 0;
    width: 145px;
    display: none;
    opacity: 0;
    visibility: hidden;
}

ul.menu li:hover > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

Upvotes: 3

Related Questions