垂直菜单子菜单飞出并粘到页首

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

代码也在下面。

我发现了一个的jsfiddle这不正是我想要的东西： http://jsfiddle.net/framj00/ykn2dyf0/ ，但我不能让我的菜单遵循这种风格花费2小时更改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>

来源

2016-11-29 sprucegoose

我已经更新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 
}

来源

2016-11-29 08:19:16 GvM

垂直菜单子菜单飞出并粘到页首

回答

相关问题