在bootstrap megamenu中定位悬停子菜单

时间:2017-03-08 07:26:46

标签: html css twitter-bootstrap

我正在玩yamm mega菜单for bootstrap。我在巨型菜单中添加了一个悬停菜单。它没有正确坐着。我希望悬停菜单与子菜单标题和插入符号对齐。它坐在下面,我希望它改变。我在绝对位置尝试了左侧和顶部自动,但是没有这样做。 Codepen在这里:http://codepen.io/iamgonge/pen/qrqQBK

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

{
  "someKey": "someValue",
  "someArrayKey": [
    "first",
    1,
    2,
    {
      "emptyArrayKey": []
    }
  ]
}

这是css:

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

1 个答案:

答案 0 :(得分:0)

我打开了代码。和复制粘贴在左下角的那个并粘贴在上面的那个和另一个上面的那个。

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