从顶部展开子菜单而不是下拉菜单

Question

我有一个 "standard" 导航菜单，它在鼠标悬停时显示其下的子菜单，像这样 https://jsfiddle.net/z6vur05u/

我需要在向下移动导航的同时从页面顶部推送子菜单，而不是菜单下的下拉菜单。最接近的例子是这里 http://callmenick.com/_development/slide-push-menus/（最佳效果），但我根本无法让它工作..

代码非常简单，干净的版本在这里：

<div id="menu-wrapper">

  <ul class="nav">
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li>
      <a href="#">Parent</a>
      <div>
        <div class="nav-column">
          Submenu lists here
      </div>
    </li>
    <li><a href="#">Parent</a></li>
    <li><a href="#">Parent</a></li>
    <li><a href="#">Parent</a></li>
  </ul>

</div>

如果有人能帮忙，那就太重要了！我玩了 absolute/relative 定位，但我没有走多远，所以任何帮助将不胜感激！

Answer 1

好的，我加了几行CSS，结果可以看到here。

CSS

.nav > li > div {
    [..]
    height: 0; /*added a height*/
    [..]
    top: 0px; /*changed this from 50 to 0*/
    [..]
}

.nav > li { /*completely new selector, but probably already available somewhere*/
    margin-top: 0; /*since the menu has to start at the top*/
    transition: margin-top .3s ease .15s;/*same animation as the rest, but only margin-top*/
}

.nav:hover > li { /*completely new selector, but probably already available somewhere*/
    margin-top: 250px;/*same height as the menu*/

}

.nav > li:hover > div {
    [..]
    height: 250px; /*so it animates from 0 to 250px*/
}

有了这个，你就有了一个好的开始。您只需要添加一些 jQuery 或 JS 来检查菜单点是否有子菜单。如果是，请添加 hover-stuff，如果不是，则不要。现在它运行每个菜单点的悬停效果。

Answer 2

这是 fiddle：JSBIN

添加jquery
从 .nav class

position:relative

将 position:relative 更改为 class 的 position:absolute .nav > li > div
将以下 class 连同属性添加到您的 css

.hovered { margin-top:215px; transition: all 1s; }

4.Add 这段 Jquery 在你的 html 文件中

$(function() {
$('.nav li').hover( function(){
  $(this).parent().parent().addClass("hovered");
 },
 function(){
  $(this).parent().parent().removeClass("hovered");
});
});

从顶部展开子菜单而不是下拉菜单

Expand submenu from top instead of dropdown

css

expand

drop-down-menu