Bringing an absolute positioned sub-menu forward?

Issue

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 ;)!

Solution

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

Answered By - Nick B