Добавить подменю в вертикальное меню

ив добавил этот CSS на моем вертикальном меню, чтобы создать выпадающий список ...Добавить подменю в вертикальное меню

vertical-nav ul li ul{ 
    display:none; 
    list-style-type:none; 
    width:125px; 
    padding:0px; 
    margin-top:3px; 
    margin-left:-5px; 
} 
vertical-nav ul li:hover ul{ 
    display:block; 
} 
vertical-nav ul li:hover ul li{ 
    background-color:#555555; 
    width:125px; 
    height:30px; 
    display:inline-block; 
} 
vertical-nav ul li ul li:hover{ 
    background-color:#333333; 
} 
vertical-nav ul li ul li a{ 
    color:#FFF; 
    text-decoration:underline; 
} 
vertical-nav ul li ul li a:hover{ 
    text-decoration:none; 
}

и HTML:

<li><a href="index.php?id=resellers">Staff</a> 
<ul class="sub-menu"> 
    <li><a href="#">Dropdown 1</a></li> 
    <li><a href="#">Dropdown 2</a></li> 
    <li><a href="#">Dropdown 3</a></li> 
</ul> 
</li>

здесь пример JSFIDDLE: http://jsfiddle.net/3W8kE/

любые идеи, почему его не работает? выпадающее меню постоянно отображая

источник

2013-07-10 Anonymous

Я отредактировали скрипку: http://jsfiddle.net/q9eK6/

Просто добавляется в конце вашего CSS:

.vertical-nav li ul {display: none;} 

.vertical-nav li:hover ul {display: block;}

И это будет работать так, как вы хотите. Примечание: Я не исправил стили цвета и выравнивания.

РЕДАКТИРОВАТЬ: вам нужно скрыть ul внутри li и показать его только при «зависании».

источник

2013-07-10 22:07:59

Как изменить выравнивание - удалили ли поле, но все равно то же самое? –

Вы редактируете поле и заполнение ли: .vertical-nav li { margin: 2px 0; прокладка: 5px 0; } Если вы сбросите на 0 левую и правую прокладку и маржу, внутренняя ul будет выровнена с родительским li. И добавить в: .vertical-nav li ul { дисплей: нет; прокладка: 0; margin-top: 6px; } Прокладка 0, потому что у вас была странная прокладка слева внутри. Верхний край, чтобы держать ul вниз в нижней части ли. Здесь: http://jsfiddle.net/VBjcV/ –

ok cool - когда вы наводите курсор после этого изменения, все меню перемещается вниз? есть идеи? http://jsfiddle.net/VBjcV/1/ –

Добавить подменю в вертикальное меню

ответ

Смежные вопросы