带有子菜单的垂直菜单飞出并粘在页面顶部答案

【问题标题】：vertical menu where submenu flys out and sticks to top of page带有子菜单的垂直菜单飞出并粘在页面顶部
【发布时间】：2016-11-29 16:19:16
【问题描述】：

我正在构建一个垂直菜单，并希望子菜单项在悬停时飞出。我有那个工作。但是，我希望子菜单始终位于页面顶部。我已将 position: absolute 属性添加到我的 css 中，但它不起作用。这是我现在拥有的： https://jsfiddle.net/bdsr4ypo/

代码也在下面。

我找到了一个 jsfiddle，它完全符合我的要求： http://jsfiddle.net/framj00/ykn2dyf0/ 但是在花了两个小时更改 CSS 之后，我无法让我的菜单遵循这种风格。

任何帮助将不胜感激。

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <style>
      #nav .opener {
        display: none;
      }
      ul li{
        list-style-type: none;
        list-style-image: none;
      }
       #nav {
        width: 600px;
        position: fixed;
        top: 0;
        right: 0;
        padding-top: 0px;
        z-index: 9999;
        height: 100%;
      }
       #nav ul {
        background: #4f626b;
        width: 300px;
        height: 100%;
        position: absolute;
        right: 0px;
        margin-top: 0px;
        z-index: 999999;
      }
      /* Hover dropdown */
       #nav ul li {
        position: relative;
      }
       #nav ul li a{
        color:#fff;
      }
      #nav ul li ul {
        display: none;
      }
      #nav ul li:hover ul {
        display: block;
        top: 0;
        left: -380px;
        height:100%;
      }
      </style>
    </head>
    <body>
      <!-- nav -->
            <div id="nav" class="open-close">
                <nav role="navigation">
                  <ul id="navo" class="menu nav navbar-nav">
                    <li class="button"><span class="nolink">Menu</span></li>
                    <li class="button"><a href="#">title one</a>
                      <ul class="flyout-menu">
                        <li><a href="#">section one sub-title one</a></li>
                        <li><a href="#">section one sub-title two</a></li>
                        <li><a href="#">section one sub-title three</a></li>
                      </ul>
                    </li>
                    <li class="button"><a href="#">title two </a>
                      <ul class="flyout-menu">
                        <li><a href="#">section 2 sub-title one</a></li>
                        <li><a href="#">section 2 sub-title two</a></li>
                        <li><a href="#">section 2 sub-title three</a></li>
                      </ul>
                    </li>
                    <li class="button"><a href="#">title three</a>
                      <ul class="flyout-menu">
                        <li><a href="#">section 3 sub-title one</a></li>
                        <li><a href="#">section 3 sub-title two</a></li>
                        <li><a href="#">section 3 sub-title three</a></li>
                      </ul>
                    </li>
                    <li class="button"><a href="#">title four</a>
                      <ul class="flyout-menu">
                        <li><a href="#">sub-title one</a></li>
                      </ul>
                    </li>
                    <li class="button"><a href="#">title five</a>
                      <ul class="flyout-menu">
                        <li><a href="#">section five sub-title one</a></li>
                        <li><a href="#">section five sub-title two</a></li>
                        <li><a href="#">section five sub-title three</a></li>
                      </ul>
                    </li>
                  </ul>
                </nav>
             </div>
    </body>
    </html>

【问题讨论】：

标签： html css drop-down-menu menu submenu

【解决方案1】：

我已经更新了你的fiddle

这是你想要的吗？

#nav .opener {
  display: none;
}

ul li {
  list-style-type: none;
  list-style-image: none;
}

#nav {
  width: 600px;
  position: fixed;
  top: 0;
  right: 0;
  padding-top: 0px;
  z-index: 9999;
  height: 100%;
}

#nav ul {
  background: #4f626b;
  width: 300px;
  height: 100%;
  position: absolute;
  right: 0px;
  margin-top: 0px;
  z-index: 999999;
  padding: 0;
}


/* Hover dropdown */

#nav ul li {
  /* position: relative; */ // removed
  padding-left: 40px; //added
}

#nav ul li a {
  color: #fff;
}

#nav ul li ul {
  display: none;
}

#nav ul li:hover ul {
  display: block;
  top: 0;
  left: -100%; //changed to -100%
  height: auto; //changed to auto
}

【讨论】：