Нужна помощь фиксации выпадающего меню 3 уровня

Question

Я использую следующий раскрывающийся список:

CSS:

html{ 
    height:100%; 
} 
body{ 
    height:30%; 
    position: relative; 

} 
.dropdown-submenu { 
    border-bottom: 1px solid #ccc; 
} 
#mn-wrapper { 
    display: block; 
    width: 100%; 
    position: absolute; 
    height: 100%; 
} 
.mn-sidebar { 
    margin-left: 100px; 
    display: block; 
    position: relative; 
    vertical-align:top; 
    padding-bottom: 49px; 
    background: #272930; 
    width: 216px; 
    z-index: 2; 
} 
#mn-cont { 
    display:none; 
    vertical-align: middle;  
    position: relative; 
    padding: 1; 
} 
.container { 
    margin-right: auto; 
} 
.cnt-mcont { 
    background-color: #F6F6F6; 
    position: absolute; 
    color: inherit; 
    font-size: 13px; 
    font-weight: 200; 
    line-height: 21px; 
    padding: 0; 
    margin-top: 0; 
    height: 55vh; 
    width: 900px; 
} 
.mn-sidebar .mn-toggle { 
    display: none; 
    padding: 10px 0; 
    text-align: center; 
    cursor: pointer; 
} 
.mn-vnavigation { 
    margin: 0 0 0 0; 
    padding: 0; 
    border-top: 1px solid #1a1c20; 
    border-bottom: 1px solid #2f323a; 
} 
.mn-vnavigation li a { 
    border-top: 1px solid #32353e; 
    border-bottom: 1px solid #1a1c20; 
    display: block; 
    padding: 14px 18px 13px 15px; 
    color: #fff; 
    text-decoration: none; 
    font-size: 12px; 
    font-weight: 300; 
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); 
    white-space: nowrap; 
} 
.dropdown-submenu > 
.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    height: 55vh; 
    width: 216px; 
    background: #272930; 
} 
.dropdown-submenu:hover > 
.dropdown-menu { 
    display: block; 
} 
.dropdown-submenu > a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 
.dropdown-submenu:hover > a:after { 
    border-left-color: #fff; 
} 
.dropdown-submenu.pull-left { 
    float: none; 
} 
.dropdown-submenu.pull-left > .dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
} 
ul { 
    list-style: none; 
} 
ul.dropdown-menu.parent { 
    margin-top: -1px; 
} 
.bottom-mn { 
    bottom:0px;   
    position:absolute; 
    width:100%; 
} 

HTML:

</br><//br></br></br> 

<div id="mn-wrapper"> 
    <div class="mn-sidebar"> 
     <div class="mn-toggle"><i class="fa fa-bars"></i></div> 
     <div class="mn-navblock"> 
      <ul class="mn-vnavigation"> 
       <li class="dropdown-submenu active"> 
        <a tabindex="-1" href="#">Client Advice</a> 
      <ul class="dropdown-menu"> 
       <li><a tabindex="-1" href="#">Pre-advice</a></li> 
       <li><a href="#">Strategy & Technical</a></li> 
       <li><a href="#">Research</a></li> 
       <li class="dropdown-submenu active"> 
       <a href="#">APL & Products</a> 
       <ul class="dropdown-menu parent"> 
        <li style=" border-bottom: 1px solid #ccc;"> 
             <a href="#">Approved Product List 
              <span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span> 
              <span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span> 
             </a> 
            <ul class="child"> 
             <li style="padding:10px 15px; color:white;">Platforms</li> 
        <li style="padding: 10px 15px; color:white;">Managed Funds</li> 
        <li style="padding: 10px 15px; color:white;">Wealth Protection</li> 
        <li style="padding: 10px 15px; color:white;">Listed Securities</li> 
        <li style="padding: 10px 15px; color:white;">Wealth Protection</li> 
        <li style="padding: 10px 15px; color:white;">Listed Securities</li> 
        <li style="padding: 10px 15px; color:white;">Listed Securities</li> 
        </ul> 
           </li> 
       <li style=" border-bottom: 1px solid #ccc;"><a href="#">Model Portfolios</a></li> 
       <li style=" border-bottom: 1px solid #ccc;"><a href="#">Non-approved Products</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Implementation</a></li> 
      <li><a href="#">Review</a></li> 
      <li><a href="#">Execution Only</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Personal Development</a></li> 
     <li><a href="#">Practice</a></li> 
     <li><a href="#">News</a></li> 
    </ul> 
    </div> 
    <div class="bottom-mn"> 
     <ul class="mn-vnavigation"> 
       <li> 
        <a href="#">My Favourite</a> 
      </li> 
      <li> 
        <a href="#">Most Popular</a> 
      </li> 
     </ul> 
    </div> 
</div> 
<div class="container" id="mn-cont"> 
    <div class="cnt-mcont"> 
     <h1>Title Page</h1> 
    </div> 
</div> 
</div> 
</div> 

JS:

$('.child').hide(); //Hide children by default 
$('.parent').children().click(function() { 
    event.preventDefault(); 
    $(this).children('.child').slideToggle('slow'); 
    $(this).find('span').toggle(); 
}); 

http://codepen.io/anon/pen/RWRdWj

Возможно ли получить подменю (т. Е. Когда вы наводите курсор на APL & Продукты, то я хочу, чтобы подменю 3-го уровня отображались перед APL & Продукты, а не сверху). Можно ли это сделать?

Answer 1

Попробуйте example

Вы можете решить эту проблему, добавив пользовательский класс .third-menu на вашем <ul class="dropdown-menu parent third-menu">

и добавить эти правила в новый класс CSS:

.third-menu{ 
    position: relative; 
    top: -50px!important; 
} 

первое правило будет позиционировать подменю относительно <a href="#">APL & Products</a>, а второе правило сделает его встроенным с левым меню, зависающим элементом, то есть APL & Продукты