CODEWITHSUNDEEP
htmlcsspositioncss-position
Avicinnian
Avicinnian

Reputation: 1830

Bringing an absolute positioned sub-menu forward?

I've got an id #navigation with position: relative; and inside of it a class .submenu with position:absolute;. The sub-menu contains texts (<a> tag links more specifically), which have lost their cursor: pointer; property and ability to be selected on the account of them now being behind other elements on the page.

I'm not sure what I can do, short of declaring #navigation and all it's children at the bottom of the page in order to bring .submenu "to the front".

I've already tried setting z-index: 1; on .submenu, and that didn't work.

Any more suggestions/answers would be greatly appreciated ;)!

Upvotes: 3

Views: 5102

Answers (2)

jacktheripper
jacktheripper

Reputation: 14219

I added this code using inline-styling to the div of class submenu

style="z-index: 999"

and it worked

enter image description here enter image description here

Upvotes: 1

Nick Bewley
Nick Bewley

Reputation: 9289

Replace #navigation .submenu with this:

#navigation .submenu {
 z-index: 1;
 background-color: #fff;
 position: absolute;
 top: 50px;
 left: 445px;
 padding: 0px 20px;
 text-align: center;
 border: 1px solid #ddd;
}

Tested and working. Add the z-index and create a background color so that the other elements arent bleeding through—Nick B

Upvotes: 8

Related Questions