Background of menu behind other blocks

My menu block overlaps a banner and is supposed to sit above the banner. I'm using the following code:

#block-menu-menu-buffelspoort {
	 margin-top: -100px;
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}
#block-menu-menu-buffelspoort .block-title{
	display: inline-block;
	background-color: #c4094a;
	padding: 20px;
	margin-top: -10px;
	color: white;
	text-transform: uppercase;
}
#block-menu-menu-buffelspoort ul.nav {
  display: block;
	background-color: #c4094a;
	padding: 20px;
	margin-top: -10px;
}

When I'm logged in the everything looks good but when I'm logged out the background of the block goes behind the banner.In Blocks, the order of blocks is the banner is above the menu-block.

Please help. I've attached a screenshot of what I see when I'm logged out and logged in.