徽标悬停时的jQuery下拉菜单

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

在$('.logo')选择器中添加, .nav-main，这样它就是：$(".logo, .nav-main")