Dropdown Menu stylen?!

[Basti225]

Hey,
hab mal ein Dropdown Menü in CSS gemacht.
Nun will ich den Dropdown bereich mit einem anderen hintergrund als das eigentliche Menü versehen.
Nur der Hintergrund bleibt von dem eigentlichen Menü?!

<ul id="navi">
	<li><a href="#">Home</a></li>
	<li><a href="#">Designs</a>
		<ul>
			<li><a href="#">Invatio</a></li>
			<li><a href="#">Theme</a></li>
		</ul>
	</li>
</ul>

#navi {
	margin-top: -25px;
	margin-left: 550px;
	}

#navi a {
	text-decoration: none;
	font-family: Verdana;
	font-size: 14px;
	color: #fff;
}	

#navi li{ 
	background-image: url(../images/navibackground.png);
	padding: 20px 10px 14px 10px;
	width: 70px;
	float:left; 
}

#navi li ul { 
	display:none;
}

#navi li:hover ul {
	display:block;
}

#navi  li:hover ul li {
	background-image: url(../images/navidropdownbackground.png);
	}

Kann mir einer sagen, wie ich das hinbekomme, das der dropdown bereich einen anderen Hintergrund hat?!

Gruß Basti

 

[kulka1]

#navi a {
text-decoration: none;
font-family: Verdana;
font-size: 14px;
color: #fff;
}

#navi li{
background-image: url(../images/navibackground.png);
padding: 20px 10px 14px 10px;
width: 70px;
float:left;
}

Den Hintergrund würde ich immer bei dort hinmachen, wo du deinen Link definierst.

Also zb so:

#navi a {
background-image: url(../images/navibackground.png);
text-decoration: none;
font-family: Verdana;
font-size: 14px;
color: #fff;
}

#navi li{
padding: 20px 10px 14px 10px;
width: 70px;
float:left;
}

und für das Ausklappdingen sollte es dann so aussehen:

#navi li:hover ul li a {
background-image: url(../images/navidropdownbackground.png);
}

Bei mir läuft es jedenfalls so ;).