サブメニューが飛び出してページの上部にスティックされる垂直メニュー

私は垂直メニューを構築しており、サブメニュー項目をホバー上に飛ばしたいと思っています。私はそれが働いている。しかし、私はサブメニューが常にページの上部に固執したい。私は位置を追加しました：私のCSSに絶対的なプロパティが、それは動作していません。ここに私が今いるもの： https://jsfiddle.net/bdsr4ypo/サブメニューが飛び出してページの上部にスティックされる垂直メニュー

コードは以下のとおりです。

は、私が欲しいものを正確に行いjsfiddleが見つかりました： http://jsfiddle.net/framj00/ykn2dyf0/ を、私はCSSを変更する2時間を過ごした後、このスタイルに従うように私のメニューを取得することはできません。

ご協力いただければ幸いです。

<!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

サブメニューが飛び出してページの上部にスティックされる垂直メニュー

答えて

関連する問題