CODEWITHSUNDEEP
htmlcss
mheavers
mheavers

Reputation: 30158

css - can't get dropdown nav to show above content below it

I'm making a CSS dropdown navigation and I can't get the dropdown to show up above the content in the div below the navigation div. How do I do this, without positioning both divs absolutely and specifying a z-index? You can see my example here:

http://stage.fourwallsla.com/in-the-neighborhood

Upvotes: 2

Views: 522

Answers (4)

Dipak
Dipak

Reputation: 12190

#container #top_nav .subnav{
  z-index: 2;
}

#container #top_nav .subnav li > a{
  background: #fff;
}

Upvotes: 0

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

You can't do it without z-index specifing or swapping blocks in your markup

Add to your css

#container #nav_container {
    z-index: 2;
}
#container #nav_container li a {
    background-color: #fff;
}

Upvotes: 1

bjornruysen
bjornruysen

Reputation: 850

Giving the "feature" div a negative z-index would also work (tested in Chrome Firebug)

z-index:-1

Upvotes: 0

Rick Donohoe
Rick Donohoe

Reputation: 7271

You have already used absolute positioning I see, but anyways why not add z-index to it?

#container #top_nav .subnav {
    position: absolute;
    top: 37px;
    width: 100%;
    z-index: 1000;
}

That fixes it, you just need to work on a better background color for it now!

Upvotes: 1

Related Questions