Меню с появляющимся указателем на CSS

Меню с появляющимся указателем на CSS

Код

  1. HTML: 
    <div class="menu">
	<div><a href="#1">Пункт 1</a></div>
	<div><a href="#2">Пункт 2</a></div>
	<div><a href="#3">Пункт 3</a></div>
</div>
  2. CSS: 
    .menu {text-align: center; width: 200px;}
.menu a {border: 1px solid black; display: block; margin: 5px 21px;}
.menu > div:hover {background: url(путь+к+указателю) left no-repeat;}
.menu
text-align: center;
выравниваем содержимое меню по центру.
width: 200px;
задаём ширину меню в 200px.
.menu a
border: 1px solid black;
добавляем рамку толщиной 1px, сплошную, чёрного цвета к каждому пункту.
display: block;
определяем, что отображать ссылки-пункты нужно как блоки.
margin: 5px 21px;
создаём отступы сверху и снизу по 5px (чтобы рамки не накладывались друг на друга), справа и слева по 21px (для отступа от родительского блока <div>).
.menu > div:hover
background: url(путь+к+указателю) left no-repeat;
помещаем фон (указатель), появляющийся при наведении курсора мыши (:hover) на блок <div>, в крайнюю левую точку (left) данного блока меню и не повторяем его (no-repeat).

Результат

Чтобы переместить указатель на правую сторону, нужно изменить значение left в свойстве background на right и, если требуется, указать новый путь к изображению указателя для правой стороны.

↑
↓