Блог

Я собрал простую выпадающую навигацию, которая расширяется при наведении курсора мыши на ссылку.

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

Я добавил команды onMouseover к другим ссылкам в навигации, которые сворачивают div при активации, но функциональность, которая мне действительно нужна, заключается в том, чтобы выпадающий div сворачивался, когда мышь покидает область div.

Я очень ценю любую помощь в этом.

——РЕДАКТИРОВАТЬ——-

Спасибо за помощь @Tuanderful. Я решил эту проблему неэлегантным (но эффективным) способом.

Я просто добавил событие onmouseover с триггером закрытия к разделам непосредственно под и над навигацией. Таким образом, когда курсор пользователя покидает раскрывающуюся навигацию, срабатывает триггер, и раскрывающийся список автоматически закрывается.

Я согласен, что чистый CSS-подход был бы идеальным, но из-за некоторых других сложностей с этой навигацией мне пришлось использовать решение Javascript.

Вместо того чтобы делать #subnav1 аналогом #nav, вы можете попробовать сделать div#subnav1 вложенным списком; ваша структура навигации будет выглядеть следующим образом:

 <ul>
    <li>About</li>
    <li>Products
        <ul>
            <li>Booster</li>
            ....
        </ul>
    </li>
</ul>
  

Затем вы можете использовать CSS (вместо javascript) для управления скрытием и отображением вспомогательной навигации. Это можно сделать с помощью псевдоселектора :hover.

Подход заключается в том, чтобы изначально скрыть подменю с помощью

ul ul { отображение: отсутствует}

Когда пользователь наведет курсор мыши на пункты главного меню, используйте переключатель:hover для отображения подменю

li: наведите ul {дисплей: блок}

Если вы решите изменить структуру HTML, вам может потребоваться продолжить доработку вашего CSS / изображений соответствующим образом, чтобы все встало на свои места.

Хороший ресурс, который более подробно описывает этот подход, можно найти в отдельном списке: Горизонтальные выпадающие списки. Еще более надежный пример (и немного иной подход) можно найти в этой статье CSS Wizardry о создании выпадающего меню в чистом CSS