lightskcom

косяк в том что если использовать внутри блока смещение -20px то картинка становится равной и разъезжается #menu #menu2 a{ background-position:-150px 0px; left: 0px; } #menu #menu2 a:hover {left:-20px; background-position:-150px -60px;} а смещать необходимо, так как кнопки меню расположены в нахлест, т.е. есть общая область(на изображении) для соседних кнопок.

Проблемы возникли непосредственно с версткой данного элемента. <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, что приводит к некорректному отображению

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