Javascript 需要帮助修复3级下拉菜单吗

我正在使用以下下拉列表：

CSS:

HTML:

是否可以获取子菜单（即，当您将鼠标悬停在APL&Products上时，我希望第三级子菜单显示在APL&Products前面，而不是顶部）。可以这样做吗？

试试这个

您可以通过在

上添加自定义类

.third menu

来解决此问题

并将此规则添加到新的css类：

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

---

第一条规则将子菜单相对于

定位，第二条规则将使其与左侧菜单悬停项对齐，即APL&Products

您说的“前”和“上”，但我在代码笔中看到了左和右。很难理解您的要求。@1I13v但是，当我将鼠标悬停在APL&Products上时，剩下的列表项（仅执行、审阅、执行）消失了。为什么会这样？这个问题能解决吗？

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

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

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