Hallo liebe Gemeinde,

ich habe 'mal wieder ein kleines Problem:

beim hover über einem Element der Navigation (MainMenu a:hover) soll im div ".main" ein Overlay eingeblendet werden, das die Seite abdunkelt.

Ich habe bisher:
1. das eigentliche Overlay:

.overlay {  
	display: none;  
	position: absolute;  
	top: -15px;  
	left: 0px;  
	background-color: rgba(0,0,0,0.75);  
	width: 100%;  
	height: 100%;  
	margin-bottom: -100%;  
	margin-right: -100%;  
	z-index: 300;  
	-moz-border-radius: 10px;  
	-webkit-border-radius:10px;  
	border-radius: 10px;  
}  

Dieses liegt im div ".main".

2. meinen nicht funktionierenden Codeschnipsel, der Elemente im div ".header", hier genauer eben das "MainMenu a" nutzen soll, um das Overlay sichtbar zu machen:

MainMenu a:hover .overlay {  
	display: block;  
}

Wenn ich das Overlay im css direkt auf display:blocK setze, ist alles so, wie es sein soll. Die z-indices stimmen also. Offenbar mache ich aber Fehler beim Ansprechen der Elemente. Ich komm' nur nicht drauf, welche. Kann jemand helfen?

Gruß
dieselross