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

我最近在一个网站上看到了一个我喜欢的导航效果，但是找不到它来检查代码，看看它是如何实现的。有一个标准的菜单栏，宽度为100%，高度约为30px，每个链接的间距相等。当您将鼠标悬停在gallery链接上时，整个菜单栏都发生了变化，链接被替换为子菜单。没有下拉菜单，整个菜单栏更改为子菜单项。我不太清楚这是怎么做到的。如有任何建议，将不胜感激。下面是我正在使用的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>

---

不确定这是否是你正在寻找的，但看看这个

设置一个固定高度的导航相对定位和目标的父母嵌套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");
    });

---

嘿，非常感谢。这么快的回答！这几乎正是我要找的。它在用户体验方面可能没有我记忆中的那么棒，但如果我添加一点淡入淡出的过渡可能会有所帮助。你真厉害一个简单的问题。我添加了一个过渡到。菜单过渡：全部.3轻松输入输出；这会减慢正在发生的事情，但是转换在最初的mousover上不起作用。它最初会跳跃，然后任何后续的鼠标悬停都是平滑的。有什么建议吗？提前谢谢。嗨，厄尼；你能给我发一把小提琴来修改你的更新代码吗？哦，是的，对不起，这是我的密码笔：对不起，厄尼；他不在城里。很高兴你解决了。