Я хочу показать класс мега-меню при наведении на продукты

Я хочу показать <div class="megamenu"> при зависании ссылки на продукт, и я не могу это понять.Я хочу показать класс мега-меню при наведении на продукты

<nav id="nav"> 
    <ol class="nav-primary"> 
     <li class="level0 nav-1 first"><a href="#" class="level0">Home</a></li> 
     <li class="level0 nav-2"><a href="#" class="level0">About</a></li> 
     <li class="level0 nav-3" id="products"><a href="#" class="level0 products">Products</a> 
     <li class="level0 nav-4"><a href="#" class="level0">Projects</a></li> 
     <li class="level0 nav-5"><a href="#" class="level0">Service</a></li> 
     <li class="level0 nav-6 last"><a href="#" class="level0">Contact Us'</a></li> 
    </ol> 
</nav> 
<div class="megamenu">This is for test</div></li>

источник

2015-10-13 Pratik bhatt

не представляется возможным с помощью CSS с учетом текущей Структура HTML. –

Самое близкое, что вы можете сделать, это показать мегаману при наведении всего навигатора. Наведение на ссылку продукта для отображения мегаману потребует более мощного селектора, чем в настоящее время в CSS. – TylerH

Как уже упоминалось выше, для этого пока нет каких-либо решений для CSS. Если вам все еще нужно решение для этого, вам нужно посмотреть на javaScript/jQuery. Это определенно предоставит вам необходимое вам решение –

Использование только CSS невозможно (по крайней мере, не сейчас). Если .megamenu были внутри каждого li, тогда вы могли бы использовать CSS. Но для этого конкретного случая, когда .megamenu не ребенок .nav-первичного, вы могли бы использовать JQuery, как это:

$(document).ready(function() { 
    $('#nav .nav-primary a').mouseenter(function() { 
    $('.megamenu').show(); 
    }); 
    $('#nav .nav-primary a').mouseleave(function() {  
    $('.megamenu').hide(); 
    }); 
});

Вы можете увидеть этот пример здесь: http://jsfiddle.net/zxfb8gxL/

источник

2015-10-13 14:37:52

Я хочу показать класс мега-меню при наведении на продукты

ответ

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