javascript - 将主导航链接替换为悬停时的子菜单链接 - 而不是下拉菜单

Question

最近在一个网站上看到一个很喜欢的导航效果，但是找不到了，查了下代码，看看是怎么做的。有一个标准的菜单栏，宽度为 100%，高度约为 30 像素，每个链接在其中等距分布。当您将鼠标悬停在图库链接上时，整个菜单栏发生变化，链接被替换为子菜单。没有下拉菜单，整个菜单栏都变成了子菜单项。我不太清楚这是怎么做到的。任何建议，将不胜感激。这是我正在使用的示例 html 标记:

<nav>
    <ul class ="menu">
        <li class ="nav__item"><a href="about.html">about</a></li>
        <li class ="nav__item"><a href="galleries.html">galleries</a>
            <ul class="submenu">
                <li class ="nav__subitem"><a href="one.html">one</a></li>
                <li class ="nav__subitem"><a href="two.html">two</a></li>
                <li class ="nav__subitem"><a href="three.html">three</a></li>
                <li class ="nav__subitem"><a href="four.html">four</a></li>
                <li class ="nav__subitem"><a href="five.html">five</a></li>
                <li class ="nav__subitem"><a href="six.html">six</a></li> 
            </ul> <!-- close sub -->
        </li>
        <li class ="nav__item"><a href="blog.html">stories</a></li>
        <li class ="nav__item"><a href="contact.html">contact</a></li>  
        <li class ="nav__item"><a href="thankyou.html">thank you</a></li>     
    </ul>
</nav>

Answer 1

不确定这是否是您要查找的内容，但请查看此 fiddle

通过相对定位为导航设置固定高度，并在鼠标悬停时定位嵌套 ul 的父级我能够实现这种效果。

nav {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #999999;
}
.menu {
    list-style-type:none;
    position: relative;
}
ul {
    padding: 0;
    margin: 0;
}
li.nav__item {
    float:left;
}
li.nav__item a {
    padding: 0 15px;
    line-height:50px;
}
.submenu {
    position:absolute;
    left:15px;
}
.nav__subitem {
    line-height: 50px;
    float: left;
    list-style: outside none none;
}

还有一点 jQuery 魔法将它们结合在一起。

 $(".has-children").mouseover(function () {
        $(".menu").css("top", "-50px");
    });
    $(".main-navigation").mouseleave(function () {
        $(".menu").css("top", "0px");
    });