Верстка меню с нахлестом

[lightskcom]

Вечер добрый возникла проблема с версток меню вида:

Хотелось бы решить проблему средствами html, css +кроссбраузерность . Если кто встречался с подобным. дайте совет.

[Shift-Web]

Спрайты + BG position + :hover, я бы еще img data перегнал сразу. Шрифт лучше срезать и сделать текстом, тогда сэкономите на байтах

Edited December 26, 2010 by Shift-Web

[gorinich]

а проблема-то в чем? и где проблемный вариант?

[lightskcom]

Проблемы возникли непосредственно с версткой данного элемента.

	<ul id="menu">
	  <li id="menu1"><a href="#"></a></li>
	  <li id="menu2"><a href="#"></a></li>
	  <li id="menu3"><a href="#"></a></li>
	  <li id="menu4"><a href="#"></a></li>
	  <li id="menu5"><a href="#"></a></li>
	  <li id="menu6"><a href="#"></a></li>
	</ul>

#menu{
  width: 100%;
  position:relative;
}
#menu li{display:inline; background: none; padding: 0 0 0 0; margin: 0 0 0 0;}
#menu li a{
  display:block;
  background:url(nav.png) top left no-repeat;
  float:left;
  width:170px;
  height:30px;  
}

#menu #menu1 a{
  background-position:0px 0px}
#menu #menu1 a:hover{background-position:0px -30px}


#menu #menu2 a{
  background-position:-150px 0px;}
#menu #menu2 a:hover {background-position:-150px -60px}

#menu #menu3 a{
  background-position:-300px 0px;}
#menu #menu3 a:hover { background-position:-300px -30px}

#menu #menu4 a{
  background-position:-450px 0px;}
#menu #menu4 a:hover { background-position:-450px -60px}

Проблема: при наведении на пункт(кроме 1-го) нужно изменить изображение сместившись влево на 20px, что приводит к некорректному отображению

[Shift-Web]

А в чём косяк выражается?

[lightskcom]

косяк в том что если использовать внутри блока смещение -20px то картинка становится равной и разъезжается

#menu #menu2 a{
  background-position:-150px 0px;
 left: 0px;
}
#menu #menu2 a:hover {left:-20px; background-position:-150px -60px;}

а смещать необходимо, так как кнопки меню расположены в нахлест, т.е. есть общая область(на изображении) для соседних кнопок.

[d0ublezer0]

Вот посмотрите сайт о таре, там примерно так же сделано

Edited December 27, 2010 by d0ublezer0