How can I extend the main menu background?

How can I extend the background for the main menu (in the basic style) so it goes past the margins for the main content area? I want the menu background to span the width of a browser but have the menu links in the same place as they are now. I attached an image to show what I want to do.

I have this so far:

.mainMenu {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
}

Having position: absolute; hides .navigationHeader for some reason. How can I do this and continue to display .navigationHeader?

I got this figured out on my own.