我正在使用用于 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;
}
最佳答案
好吧，我打开了代码。然后复制粘贴在左下角的一个，然后将其粘贴在上面的一个和另一个上面的一个。
<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">
关于html - 在 bootstrap megamenu 中定位悬停子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42665334/