Как да направя hover-а на менюто да се показва нормално?

[tedo96]

	<div class="menu">
		<ul>
			<li><a href="#">Начало</a></li>
			<li><a href="#">Уроци</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Книги</a></li>
			<li><a href="#">Екип</a></li>
			<li><a href="#">Контакти</a></li>
		</ul>
	</div>

[css].menu { background: url('../images/menu.png') repeat-x; width:100%; height:36px; margin-top: 25px; }
.menu ul { margin:0; padding:0; list-style-type:none; }
.menu li { padding-right:4px; float:left; padding: 10px 0 0 35px; }
.menu li:hover { background: url('../images/hover.png'); width:56px; height:14px; margin: 0 0 0 35px; display: inline; }[/css]
Искам hover-a да се показва нормално над всеки текст.
Ето и демо, за да видите как се показва в момента: http://html-bg.info/demo/

 

[macmen]

.menu {
background: url("menu.png") repeat-x scroll 0 0 transparent;
height: 36px;
margin-top: 25px;
width: 100%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline;
float: left;
margin: 0;
padding: 0;

}
.menu li a {
display: block;
margin: 0;
padding: 7px;
}
.menu ul li a:hover {
background: url("hover.png") repeat scroll 0 0 transparent;
}

 

[tedo96]

Стана, но не точно както искам аз... Искам менюто да е като в http://slides.bg/
Надявам се това да не се счита като реклама и бате Гошо да няма нищо против.
Картинката: http://html-bg.info/demo/hover.png
Искам да е с фиксира дължина, за да може когато путона е на :focus се мине с мишката върху друг линк и се получава hover-а и двете картинки да се слеят. Точно както е в slides.

 

[tedo96]

Това, което искам да направя не ставало с css, ами с php. Още по-добре.
Мерси!

 

[shterev]

Това, което искам да направя не ставало с css, ами с php. Още по-добре.
Мерси!

И кой ти изръси тая простотия? Ако менюто искаш да е като на тоя сайт , не виждам какво сложно има да се направи

А-то го правиш блоков елемент здаваш му падинг да речем и на него( <а> ) слагаш като е :hover да има бекграунд. Това е.

Кво се мъчиш на тия <li> да слагаш не те знам

а{
   padding:0 20px;
  display:block;
}

a:hover{
 color:#fff;
 background:#000;
}

 

[shterev]

Това, което искам да направя не ставало с css, ами с php. Още по-добре.
Мерси!

И кой ти изръси тая простотия? Ако менюто искаш да е като на тоя сайт , не виждам какво сложно има да се направи

А-то го правиш блоков елемент здаваш му падинг да речем и на него( <а> ) слагаш като е :hover да има бекграунд. Това е.

А това да остава селектирано, когато си на нея страница е вече с php , слагаш клас и тоя клс вече си го контролираш както искаш да е

Кво се мъчиш на тия <li> да слагаш не те знам

а{
   padding:0 20px;
  display:block;
}

a:hover{
 color:#fff;
 background:#000;
}