html - 在 bootstrap megamenu 中定位悬停子菜单

Question

我正在使用用于 Bootstrap 的 yamm mega 菜单。我在大型菜单中添加了一个悬停菜单。它没有正确坐好。我希望悬停菜单与子菜单标题和插入符号对齐。它坐在下面，我想改变它。我在绝对位置上尝试了 left 和 top auto，但那没有做到。代码笔在这里:http://codepen.io/iamgonge/pen/qrqQBK

这里是大型菜单和悬停子菜单代码:

  <header>
   <!-- Fixed navbar -->
   <nav class="navbar agmm navbar-scroll navbar-inverse navbar-fixed-top" role="navigation" id="topnavbar">
      <div class="container">
         <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" title="frontpage">Logo here</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
            <!--Wayfinder.outerTpl -->
            <ul class="nav navbar-nav">
               <!-- Wayfinder.parentRowTpl -->
               <li class="first dropdown agmm-fw">
                  <a href="#" title="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">megamenu Level 1<b class="caret"></b></a>
                  <!--Wayfinder.innerTpl -->
                  <ul class="dropdown-menu ">
                     <!-- agmm start tags -->
                     <li>
                        <div class="agmm-content">
                           <div class="row">
                              <dl class="col-sm-15 mega-menu">
                                 <!-- Wayfinder.categoryFoldersTpl -->
                                 <dt class="first"><a href="#">Microsoft Office</a></dt>
                                 <!--Wayfinder.innerTpl -->
                                 <dd class="first">
                     <li class="hover_drop_down">
                     <a href="#">Remote Desktop Services 2016<span class="caret"></span></a>    
                     <ul class="dropdown-menu" role="menu" id="office">
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     </ul>
                     </li></dd>
                     <dd class="first"> <li class="hover_drop_down">
                     <a href="#">Remote Desktop Services 2016<span class="caret"></span></a>    
                     <ul class="dropdown-menu" role="menu" id="office">
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     </ul>
                     </li></dd>
                     <dd class="last"> <li class="hover_drop_down">
                     <a href="#">Remote Desktop Services 2016<span class="caret"></span></a>    
                     <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     </ul>
                     </li></dd>
                     </dl>

                     <dl class="col-sm-15 mega-menu">
                     <!-- Wayfinder.categoryFoldersTpl -->
                     <dt class="first"><a href="#">Microsoft Office</a></dt>
                     <!--Wayfinder.innerTpl -->
                     <dd class="first"><li class="hover_drop_down">
                     <a href="#">Microsoft Office 2016<span class="caret"></span></a>    
                     <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     </ul>
                     </li></dd>
                     <dd><a href="#">Child on level 7</a></dd>
                     <dd class="last"><a href="#">Child on level 3</a></dd>
                     </dl>

                     <dl class="col-sm-15 mega-menu">
                     <!-- Wayfinder.categoryFoldersTpl -->
                     <dt class="first"><a href="#">Microsoft Office</a></dt>
                     <!--Wayfinder.innerTpl -->
                     <dd class="first"><li class="hover_drop_down">
                     <a href="#">Microsoft Office 2016<span class="caret"></span></a>    
                     <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     </ul>
                     </li></dd>
                     <dd><a href="#">Child on level 7</a></dd>
                     <dd class="last"><a href="#">Child on level 3</a></dd>
                     </dl>
                     <dl class="col-sm-15 mega-menu">
                     <!-- Wayfinder.categoryFoldersTpl -->
                     <dt class="first"><a href="#">Microsoft Office</a></dt>
                     <!--Wayfinder.innerTpl -->
                     <dd class="first"><li class="hover_drop_down">
                     <a href="#">Microsoft Office 2016<span class="caret"></span></a>    
                     <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     </ul>
                     </li></dd>
                     <dd><a href="#">Child on level 7</a></dd>
                     <dd class="last"><a href="#">Child on level 3</a></dd>
                     </dl>

                     <dl class="col-sm-15 mega-menu">
                     <!-- Wayfinder.categoryFoldersTpl -->
                     <dt class="first"><a href="#">Microsoft Office</a></dt>
                     <!--Wayfinder.innerTpl -->
                     <dd class="first"><li class="hover_drop_down">
                     <a href="#">Microsoft Office 2016<span class="caret"></span></a>    
                     <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     </ul>
                     </li></dd>
                     <dd><a href="#">Child on level 7</a></dd>
                     <dd class="last"><a href="#">Child on level 3</a></dd>
                     </dl>

                     <dl class="col-sm-15 mega-menu">
                     <!-- Wayfinder.categoryFoldersTpl -->
                     <dt class="first"><a href="#">Microsoft Office</a></dt>
                     <!--Wayfinder.innerTpl -->
                     <dd class="first"><li class="hover_drop_down">
                     <a href="#">Microsoft Office 2016<span class="caret"></span></a>    
                     <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     <li><a href="#">Office 2016 Home & Business</a></li>
                     </ul>
                     </li></dd>
                     <dd><a href="#">Child on level 7</a></dd>
                     <dd class="last"><a href="#">Child on level 3</a></dd>
                     </dl>
                     </div>
                     </div>
                     </li>
                     <!--agmm end tags-->
                  </ul>
               </li>
               <li class=" dropdown">
                  <a href="#" title="Referanser" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                  Standard Level 1<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                     <li class="first"><a href="#">Level 2</a></li>
                     <li><a href="#">Level 2</a></li>
                     <li><a href="#">Level 2</a></li>
                     <li> <a href="#">Level 2</a></li>
                  </ul>
               </li>
            </ul>
         </div>
         <!--/.nav-collapse -->
      </div>
   </nav>
</header>

这是CSS:

/* Hover dropdown */
.dropdown ul.dropdown-menu {
    margin-top: 0;

}
#office{position: absolute;
left:200px;
z-index: 1000;}
/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu {

    display: block;
    position: absolute;
    top: auto;
    left: auto;

    z-index: 1000;
  width: 100%;
}
.dropdown-menu>li>a {
   display: block;
  margin: 10px;
  padding-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #599ab9;

}

Answer 1

好吧，我打开了代码。然后复制粘贴在左下角的一个，然后将其粘贴在上面的一个和另一个上面的一个。

     <dd class="last"> <li class="hover_drop_down">
                 <a href="#">Remote Desktop Services 2016<span class="caret"></span></a>    
                 <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Office 2016 Home & Business</a></li>
                 <li><a href="#">Office 2016 Home & Business</a></li>
                 <li><a href="#">Office 2016 Home & Business</a></li>
                 <li><a href="#">Office 2016 Home & Business</a></li>
                 <li><a href="#">Office 2016 Home & Business</a></li>
                 </ul>
                 </li></dd>

替换其他的。我想这就是你想要的。

我发现了 <dd class="last">是您要使用的标签。而不是 <dd class="first">