HTML / Javascript меню при наведении

Question

У меня уже есть навигационное меню в верхней части моей страницы, но теперь я пытаюсь развернуть подменю, когда наведу курсор на одну из этих опций. Моя первая идея состояла в том, чтобы просто иметь раздел «div» кода, такой как

<div id= "expanded_menu"> <!-- sub menu option --> </div>

и показать / скрыть его в зависимости от того, была ли указана его навигационная опция, но потом я понял, что подменю исчезнет, ​​как только я уберу свою мышь с соответствующей кнопки меню навигации. Кто-нибудь знает способ навести курсор на опцию, вызвать ли это меню, а затем иметь возможность доступа к подменю без его исчезновения?

Answer 1

Обычный способ сделать это с помощью вложенных списков ...

<ul id="main-menu">
    <li>
        First menu item
        <ul class="sub-menu">
            <li>Sub menu item</li>
            ...
        </ul>
    </li>

    <li>Second menu item</li>
    ...
</ul>

И используйте следующий CSS.

.sub-menu { display: none; }
#main-menu li:hover .submenu { display: block; }

Answer 2

Пока подменю вложено в элемент div родительского меню, ваш метод должен работать.Итак, ваша HTML-структура будет выглядеть следующим образом:

<div class="main_menu_item">MainItem
    <div class="sub_menu_item">Item1</div>
    <div class="sub_menu_item">Item2</div>
</div>

Тогда вы все еще будете зависать над основным элементом при наведении на подпункты.

Однако я лично реализовал бы все это в CSS- Ищите «CSS-меню», и вы найдете массу ресурсов.