如何格式化一個多層次的下拉菜單

Question

我想用下面的下拉菜單在我的網頁：

HTML：

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

CSS：

html{ 
    height:100%; 
} 
body{ 
    height:50%; 
    position: relative; 
} 
.dropdown-submenu { 
    border-bottom: 1px solid #ccc; 
} 
#mn-wrapper { 
    display: table; 
    width: 100%; 
    position: absolute; 
    height: 100%; 
} 
.mn-sidebar { 
    display: table-cell; 
    position: relative; 
    vertical-align: top; 
    padding-bottom: 49px; 
    background: #272930; 
    width: 216px; 
    z-index: 2; 
} 
#mn-cont { 
    display: table-cell; 
    vertical-align: top;  
    position: relative; 
    padding: 0; 
} 
.container { 
    margin-right: auto; 
} 
.cnt-mcont { 
    background-color: #F6F6F6; 
    color: inherit; 
    font-size: 13px; 
    font-weight: 200; 
    line-height: 21px; 
    padding: 15px 30px 30px 30px; 
    margin-top: 0; 
    height: 101vh; 
} 
.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: 101vh; 
    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%; 
} 

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/MaGiO/pen/YXXzeJ但是，當我將鼠標懸停在任何列表項上並打開另一個子列表時，我不希望黑色部分延伸到屏幕末尾，我希望當我將鼠標懸停在列表項上時，新列表只會延續到最後一個列表項應該發生。我在這做什麼改變？

此外，當我嘗試在CSS中的.mn側欄中使用margin-left時，則下拉列表向右移動，但子彈符號出現在第一個列表項（在下拉菜單之外）之前，爲什麼是發生了什麼？我希望下拉菜單顯示在右側。

Answer 1

評論下.dropdown-submenu > .dropdown-menu { CSS

.dropdown-submenu > 
.dropdown-menu { 
top: 0; 
left: 100%; 
margin-top: -6px; 
margin-left: -1px; 
/* height: 101vh;*/Comment this out 
width: 216px; 
background: #272930; 
} 

並請說明身高部分你是什麼意思由I want the dropdown menu to appear a bit on the right.

See This

好的嘗試下面的代碼

.mn-vnavigation li a { 
margin-left:15px; Add this style 
} 

給保證金餘額手續NG您的要求

See This