Question

I’m having an issue with an absolutely positioned sub-menu. You can see it here –

http://jsfiddle.net/TeL7F/2/

I’d like the Yellow of the main menu to overlap the red of the sub-menu.

Ideally, I’d like to achieve this without changing the HTML in any way. I may be able to add classes, but it will mean having a massive argument with some people I don’t really know.

Is this possible?

Answer 1

Absolutely positioned elements are set within the page container by default, unless their parent has an explicit value for position property, regardless of what value it is.

So, in your example, all you need to do is add position:relative; to .main_nav, and that should be all.

After change, the .main_nav style should look like:

.main_nav{
    float: left;
    height: 54px;
    list-style: none outside none;
    padding-right:5px;
    position:relative;
}

Please add a comment to this answer if there is another part to the question not achieved yet.

Update:

As per your first comment, you want the overlapped part to be yellow on top of red instead of red on top of right (please correct me if otherwise).

This can be achieved with the same fix, but applied to the anchor itself .main_nav a. Note the last two properties below:

.main_nav a{
    line-height: 55px;
    padding: 20px 20px 50px 50px;
    text-decoration: none;
    background:yellow;
    z-index:100;
    position:relative;
}

As before, please discuss this part against your requirement in the comments.