Вертикальное меню, где подменю вылетает и вставляет в начало страницы

Я строю вертикальное меню и хочу, чтобы элементы подменю вылетали при наведении. У меня это работает. Однако я хочу, чтобы подменю всегда придерживалось верхней части страницы. Я добавил положение: абсолютное свойство для моего 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>

источник

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

Вертикальное меню, где подменю вылетает и вставляет в начало страницы

ответ

Смежные вопросы