Вертикальное меню с выпадающим списком - есть ответ

Без имени, 202 просмотра

Делаю вертикальное меню с выпадающим списком.

HTML:

<div class="menu">
<ul>
<li><a href="#" class="active_page">Первый пункт</a></li>
<li><a href="#">Второй пункт</a></li>
<li><a href="#">Третий пункт</a></li>
<li><a href="#">Четвертый пункт</a></li>
</ul>
</div>

CSS:

.menu ul {
margin: 0;
padding: 0;
width:133px;
list-style-type: none;
}

.menu ul li a {
text-decoration: none;
color: #A08A50;
padding: 3px 5px;
background-color: white;
display:block;
}

.menu ul li a:visited {
color: #A08A50;
}

.menu ul li a:hover, .menu ul li .current {
color: #A08A50;
background-color: #E3DCCC;
-moz-border-radius: 3px;
border-radius: 3px;
}
.menu ul li .active_page {
background-color: #E3DCCC;
-moz-border-radius: 3px;
border-radius: 3px;
}

Вопрос вот в чем. Как сделать чтобы справа от каждого пункта меню была маленькая стрелочка по нажатию на которую появлялось выпадающее меню (в данном случае, достаточно чтобы просто появлялся div). Подобное сделано у вКонтакте, если навести на пункт меню "Сообщения", то сбоку появляется "плюсик".

Спасибо.

Ответы:

Дмитрий К

Добавьте после каждого пункта меню ещё один span, к которому привяжите нужное действие. Этот span в обычном состоянии будет иметь visibility:hidden, а при наведении visibility:visible. Внутри его можно поместить картинку со стрелкой или текст.

anomals

Ну стрелочка делается просто
К примеру такая
border-color: transparent transparent transparent #4c7fcd ;
border-style:solid;
border-width:5px;
Перемещай #4c7fcd между значениями transparent и стрелочка будет разворачиватся

11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.