Placing the Menu Over the Banner

The easiest way to place the nav over the banner image is to make the image the background of the header then place the nav inside the header and use a padding on the header to move the nav down

HTML

CSS

If I just add the padding then it increases the height of the header (remember the padding increase the size of the element)

The first example does not work correctly:

header{
width: 940px;
height: 100px;
padding-top: 54px;
background-image: url(images/header.png);
}

You need to deduct the size of the padding from the height of the header

header{
width: 940px;
height: 46px;
padding-top: 54px;
background-image: url(images/header.png);
}