我正在使用Drupal上的Bootstrap创建菜单,但是无法在下拉菜单中使用下拉菜单。
当您将鼠标悬停在主菜单项上时,将在其下方显示一个下拉菜单。下拉菜单和主菜单均正常运行,但是下拉菜单当前始终显示在屏幕上。我想使用CSS来做到这一点,但是似乎无法找到正确的选择器以使其在打开和关闭时都可见/隐藏。
我在此项目的HTML和CSS如下。谢谢!
<div class="region region-header">
<div id="block-menu-block-2" class="block block-menu-block main-navigation">
<div class="content">
<div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first expanded menu-mlid-650"><a href="">Main Menu Item 1</a><ul class="menu"><li class="first last leaf menu-mlid-687"><a href="">Dropdown Item 1</a></li>
</ul></li>
<li class="expanded menu-mlid-651 dropdown "><a href="">Main Menu Item 2</a><ul class="menu"><li class="first last leaf menu-mlid-668"><a href="">Dropdown Item 2</a></li>
</ul></li>
<li class="expanded menu-mlid-653 dropdown"><a href="">Main Menu Item 3</a><ul class="menu"><li class="first leaf has-children menu-mlid-656"><a href="">Dropdown Item 3</a></li>
</ul></li>
<li class="last expanded menu-mlid-655 dropdown"><a href="">Main Menu Item 4</a><ul class="menu"><li class="first last leaf menu-mlid-664"><a href="">Dropdown Item 4</a></li>
</ul></li>
</ul></div>
</div>
</div>
<div id="block-menu-block-1" class="block block-menu-block collapse navbar-collapse mobile-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1">
<ul class="menu"><li class="first collapsed menu-mlid-650"><a href="">Main Menu Item 1</a></li>
<li class="collapsed menu-mlid-651 dropdown "><a href="">Main Menu Item 2</a></li>
<li class="collapsed menu-mlid-653 dropdown"><a href="">Main Menu Item 3</a></li>
</ul></div>
</div>
</div>
</div>
CSS:
.dropdown-menu {
display: block;
border-radius: 0px;
display: block;
left: 0;
top: 100%;
float: left;
list-style: none;
background-clip: padding-box;
position: static;
width: 100%;
}
.mobile-nav ul.menu li ul.menu {
@extend .dropdown-menu;
.main-nav ul.menu li ul.menu {
@extend .dropdown-menu;
}
@media only screen and (min-width: 1000px;) {
.dropdown-menu {
width: auto;
display: block;
position: absolute;
width: auto;
padding-left: 10px;
padding-right: 10px;
}
}
最佳答案
菜单类是所有菜单的父级
.menu ul {
display:none;
}