垂直菜單子菜單飛出並粘到頁首

我正在構建垂直菜單，並希望子菜單項在懸停時飛出。我有這個工作。但是，我希望子菜單始終保持在頁面頂部。我已經將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

垂直菜單子菜單飛出並粘到頁首

回答

相關問題