[CSS] jak zrobić takie menu Opcje

[dwwa]

chcę zrobić takie menu:

(IMG:http://s4.ifotos.pl/img/menu_hqxaahx.png)

zrobiłem już prawie całe, ale nie wiem jak zrobić, żeby to tło w menu było dla a:hover, bo jak dam w ul li a:hover taki kod:

[CSS] pobierz, plaintext 
position: relative;
bottom: 50px;
background: #333;
height: 50px;
width: 119px;
[CSS] pobierz, plaintext 

to po najechaniu nic się nie dzieje... mój kod:

[HTML] pobierz, plaintext 
<ul class="menu">
	<li><a href="o-nas.html" title="O nas">O nas</a></li>
	<li><a href="oferta.html" title="Zobacz co możemy zaoferować">Oferta</a></li>
	<li><a href="galeria.html" title="Galeria zdjęć">Galeria</a></li>
	<li><a href="kontakt.html" title="Skontaktuj się z nami">Kontakt</a></li>
</ul>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#header ul.menu {
	float: right;
	list-style: none;
}
 
#header ul.menu li {
	display: inline-block;
	height: 83px;
	width: 119px;
 
}
 
#header ul.menu li a {
	position: relative;
	top: 60px;
	padding-left: 10px;
}
 
#header ul.menu li a:hover {
	width: 119px;
	height: 50px;
	background: #24292c;
	border-right: 1px solid #2f2f2f;
	border-left: 1px solid #2f2f2f;
	display: block;
	position: relative;
	bottom: 60px;
 
}
[CSS] pobierz, plaintext 

z góry dzięki za pomoc

Ten post edytował dwwa 7.10.2011, 17:46:04

[lukasz91]

[CSS] pobierz, plaintext 
#header ul.menu {
	float: right;
	list-style: none;
}
 
#header ul.menu li {
	float:left;
}
 
#header ul.menu li a {
	position: relative;
	top: 60px;
	padding-left: 10px;
	width: 119px;
	height: 50px;
}
 
#header ul.menu li a:hover {
	background: #24292c;
	border-right: 1px solid #2f2f2f;
	border-left: 1px solid #2f2f2f;
 
}
[CSS] pobierz, plaintext 

Pisane bez sprawdzania, ale powinno być ok (IMG:style_emoticons/default/smile.gif)

Ten post edytował lukasz91 7.10.2011, 20:59:23