More List

   
   
 <div class="row">
   <div id="mn-wrapper">
   <div class="mn-sidebar list-group card">
      <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>
                           <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><a href="#">Model Portfolios</a></li>
                        <li><a href="#">Non-approved Products</a></li>
                     </ul>
                  </li>
                 
               </ul>
            </li>
            <li><a href="#">More List</a></li>
            <li><a href="#">Practice</a></li>
            <li><a href="#">News</a></li>
           
            <li>
               <a href="#">Option- 1</a>
            </li>
            <li>
               <a href="#">Option- 2</a>
            </li>
            <li>
               <a href="#">Option- 3</a>
            </li>
            <li>
               <a href="#">Option- 4</a>
            </li>
         </ul>
      </div>
   </div>
   <div class="container" id="mn-cont">
      <div class="cnt-mcont">
      </div>
   </div>
</div>
</div>

                                         

   #mn-wrapper {
      display: table;
      width: 100%;
       height: 100%;
    }
    .mn-sidebar {
      display: table-cell;
      position: relative;
      vertical-align: top;
      padding-bottom: 49px;
       background: #fff;
       width: 25%;
       z-index: 2;
    }
    #mn-cont {
      display: table-cell;
       vertical-align: top;     
        position: relative;
       padding: 0;
    }
    
    
    .mn-sidebar .mn-toggle {
      display: none;
      padding: 10px 0;
      text-align: center;
       cursor: pointer;
    }
    .mn-vnavigation {
      padding: 0;
    }
    .mn-vnavigation li a {
        display: block;
      padding: 14px 18px 13px 15px;
      color: #363431;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
       white-space: nowrap;
    }
    .dropdown-submenu >
    .dropdown-menu {
       top: 0;
      left: 101%;
      margin-top: -6px;
      margin-left: -1px;
      height: auto;
      width: 100%;
      background: #fff;
    }
    .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: #212529;
       margin-top: 5px;
       margin-right: -10px;
    }
    .dropdown-submenu:hover > a:after {
       border-left-color: #212529;
    }
    .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;
    }
    
    .dropdown-menu li:hover {
      color: #167DF5;
      background: #f6f9ff;
    }