Проблема с раздвижной дверью CSS меню ...

Question

Итак, я пытаюсь создать CSS-меню с раздвижными дверями - в основном одно изображение, на которое вы перемещаете фоновую позицию, когда оно находится или когда оно активно.

Однако, обычно, когда я перехожу к следующей ссылке, используя:

#xmenu li.ypart {width:80px; height:35px;}
#xmenu li.ypart a {background-position:-33px 0px; }

От последней ссылки до любой ширины, которую я указываю. Видите значок MAP на изображении ниже? Я пытаюсь связать его, чтобы ссылка не шла от ссылки ОТПРАВИТЬ ОБРАТНУЮ СВЯЗЬ до кнопки карты. Я просто хочу, чтобы ссылка была на этом квадрате.

Так есть идеи?

Answer 1

Если я правильно понимаю, вы должны сделать ссылку (элемент <a>) элементом блока и указать для нее определенную ширину и высоту (и, возможно, относительное / абсолютное позиционирование, в зависимости от того, как настроен макет).Таким образом, область попадания для ссылки будет ограничена этими размерами.

Как-то так для разметки:

...
<a href="/map">Map</a>
...

И что-то вроде этого для CSS:

#xmenu li.ypart a { display: block; width: 40px; height: 35px; }