Mega-menu - Невозможно выбрать дочерние элементы при зависании

Question

Я в процессе адаптации довольно ошеломляюще выглядящего мега-меню бутстрапа в полностью отзывчивую версию. Я хочу сохранить внешний вид меню, так как он очень привлекателен, однако в меню в настоящее время используется функция выпадающего меню Bootstrap, означающая, что пользователь должен щелкнуть, чтобы открыть меню. На мой взгляд, это не очень хорошо работает на рабочем столе, так как многие ожидают, что меню появится при наведении. Итак, я приспособил меню, используя следующий код, чтобы обеспечить дочерние элементы мега меню отображается при наведении указателя мыши на элемент на рабочем столе:

@media only screen and (min-width: 992px){ 
    .mega-dropdown:hover .mega-dropdown-menu{ 
     display: block; 
    } 
} 

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

Есть ли способ, в котором я могу вызвать меню, чтобы остаться достаточно длинным открытым для пользователя, чтобы перейти в меню ребенка, используя только HTML и CSS? Я знаю, что я мог бы легко использовать Javascript для этого, но в моих глазах Javascript следует использовать экономно и только тогда, когда это действительно необходимо.

Полный код можно найти в этом Codepen:

http://codepen.io/JasonEspin/pen/zGqoBa

Answer 1

Вам необходимо удалить верхнее поле и заменить его на что-то, что вы можете на самом деле, как прозрачная рамка.

.navbar-nav>li>.dropdown-menu { 
    margin-top: 0; /* remove applied top margin */ 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    border-top: 20px solid transparent; 
} 

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

Codepen Demo

Answer 2

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

и убедитесь, что у вас есть css, чтобы сказать, что когда вы нависаете в мега-меню, он остается открытым.

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