我正在使用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;
            }

10-07 19:54
查看更多