Question

嘿伙计，

我正在尝试实施此导航，您基本上将徽标作为顶级菜单项，并在徽标悬停时激活菜单项。 logo嵌套在header元素中，header是nav元素的兄弟，我想在mouseover事件中表现为下拉导航。

<header role="banner">
    <a href="#" title="title">
        <h1 class="logo">
            <img class="logo-home-desktop" src="logo.png" alt="logo">
        </h1>
    </a>
</header>

<nav class="nav-main">
    <div class="nav-container">
        <ul id="nav" class="nav">
            <li class="level0 nav-1 first level-top"><a href="#" class="level-top"><span>link 1</span></a></li>
            <li class="level0 nav-2 level-top parent"><a href="#" class="level-top"><span>link 2</span></a></li>
            <li class="level0 nav-3 level-top"><a href="#" class="level-top"><span>link 3</span></a></li>
            <li class="level0 nav-4 level-top parent"><a href="#" class="level-top"><span>link 4</span></a></li>
            <li class="level0 nav-5 level-top"><a href="#" class="level-top"><span>link 5</span></a></li>
            <li class="level0 nav-6 last level-top"><a href="#" class="level-top"><span>link 6</span></a></li>
        </ul>
    </div>
</nav>


.logo {
    display: block;
    line-height: 2em;
    font-size: 1rem;
    float: left;
    padding: 20px 0 0;
    z-index: 2;
    position: relative;
}

.nav-main {
    position: absolute;
    top: 45px;
    left: 0;
    height: 100%;
    min-height: 100%;
    z-index: 10;
    display: none;
}


$(".logo").hover(function(){
    $('.nav-main').css('display', 'block');
}, function(){
    $('.nav-main').css('display', 'none');
});

jsfiddle link:

Answer 1

在, .nav-main选择器中添加$('.logo')，以便它$(".logo, .nav-main")

徽标悬停上的jQuery下拉菜单

1 个答案: