Всем привет.
Столкнулся с проблемой решения задачи.
Конечно проще и удобнее было бы вложенный ul сделать в li. Но нужно именно так.
Есть менюшка такая
CODE (
html):
скопировать код в буфер обмена
<ul class="top-nav">
<li><a href="/">Главная</a></li>
<li class="menu-1"><a href="/news">Новости</a></li>
<li class="menu-2"><a href="/articles">Статьи</a></li>
<li class="menu-3"><a href="/faq">Вопросы</a></li>
<li class="menu-4"><a href="/help">Помощь</a></li>
<ul>
Есть относящиеся к ней подменю, которые скрыты по умолчанию
CODE (
html):
скопировать код в буфер обмена
<div class="sub-menu sub-menu-1"><h3>Новости</h3><p>Наши новости</p></div>
<div class="sub-menu sub-menu-2"><h3>Статьи</h3><p>Наши статьи</p></div>
<div class="sub-menu sub-menu-3"><h3>Вопросы</h3><p>Ответы на вопросы</p></div>
<div class="sub-menu sub-menu-4"><h3>Помощь</h3><p>Быстрая помощь</p></div>
Пример того, что получилось -
http://jsfiddle[dot]net/dTBkJ/2/
Открывать определенное подменю при наведении на меню не проблема.
Но проблема в том:
- как удержать подменю открытое, если на него навели курсор(т.е. не убирают курсор с подменю)
- как добавить в меню класс active к li пока курсор на подменю, чтобы выделять активный пункт меню.
- как сделать задержку перед открытием. т.е. когда юзер именно держит курсор на меню, а не провел случайно, чтобы не мигало подменю, а показывалось именно при наведении и удержании курсора определенное время.
Я честно гуглил. Но решения которые находил или варианты, либо работали с ошибками, либо были не кроссбраузеры.