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

[rusbear28]

Здравствуйте!

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

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). Подобное сделано у вКонтакте, если навести на пункт меню "Сообщения", то сбоку появляется "плюсик".

Это меню ВК. Здесь при наведении на пункт меню появляется "+".

В моем меню нужно чтобы по нажатию на "+" (или стрелочку) ниже появлялось выпадающее подменю (что-то вроде Действия для выбранного раздела).

Подскажите, как это сделать? Буду очень благодарен.

Спасибо.

[npofopr]

Поищите что такое "аккардеон меню css"

А стрелочку можно добавлять картинкой в беграунд на пункт меню, при ховере

[rusbear28]

Поищите что такое "аккардеон меню css"

А стрелочку можно добавлять картинкой в беграунд на пункт меню, при ховере

Я знаю что такое меню-аккардеон)

Мне не нужно меню-аккардеон, я хочу сделать вот что:

сейчас выводится простое вертикальное меню - на сайте это что-то вроде разделов. По щелчку на элемент меню переходишь в соответствующий раздел, но наведя на стрелочку или "плюсик" справа от этого элемента и щелкнув по ней, выпадает список действий для этого раздела (удалить, переместить, редактрировать и т.п.).

Вот, смотрите, как здесь:

нажимаю на "+" и поверх меню появляется див с действиями для текущего раздела.

Суть моего вопроса заключается вот в чем: как разместить сбоку див или span (в одну строку), но чтобы он появлялся только при наведении на основной пункт меню?

Edited October 18, 2013 by rusbear28

[npofopr]

Всей ссылке position: relative; а плюсику position: absolute; с прибить справа, самое простое.

Можно еще float: right; для плюсика сделать.

как то так http://jsfiddle.net/npofopr/mcA3G/

[rusbear28]

Всей ссылке position: relative; а плюсику position: absolute; с прибить справа, самое простое.

Можно еще float: right; для плюсика сделать.

как то так http://jsfiddle.net/npofopr/mcA3G/

Да, да, да, именно так) Благодарю!