Question

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

Answer 1

菜单类是它应该是

的所有菜单的父级

            .menu ul {
            display:none;
            }

Answer 2

$(document).ready(function() {

  $(".menu li a").hover(function() {
    $(this).next().show();
  }).mouseout(function() {
    $(this).next().hide();
  });

});

				.menu ul {
				  display: none;
				}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="region region-header">
  <div id="block-menu-block-2" class="block block-menu-block main-nav top-nav contextual-links-region">

    <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 active-trail menu-mlid-650"><a href="" class="active-trail">Main Menu Item 1</a>
            <ul class="menu">
              <li class="first last leaf active-trail active menu-mlid-687"><a href="" class="active-trail active">Main Menu Item 2</a>
              </li>
            </ul>
          </li>
          <li class="expanded menu-mlid-651 dropdown "><a href="">Main Menu Item 3</a> 
            <ul class="menu">
              <li class="first last leaf menu-mlid-668"><a href="">Item 3 Dropdown Item</a>
              </li>
            </ul>
          </li>
          <li class="leaf menu-mlid-652"><a href="">Main Menu Item 4</a>
          </li>
          <li class="leaf menu-mlid-654"><a href="">Main Menu Item 5</a>
          </li>
          <li class="expanded menu-mlid-653 dropdown"><a href="">Main Menu Item 6</a> 
            <ul class="menu">
              <li class="first leaf has-children menu-mlid-656"><a href="">Item 6 Dropdown Page</a>
              </li>
              <li class="last leaf menu-mlid-659"><a href="">Item 6 Dropdown Page 2</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="block-menu-block-1" class="block block-menu-block collapse navbar-collapse mobile-nav contextual-links-region">

    <div class="content">
      <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-    0 menu-level-1">
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 3

这是一个简单的基于:hover的下拉菜单，只使用CSS - 无需编写脚本：

ul {
margin: 0;
padding: 0;
}

li {
position: relative;
display: block;
width: 120px;
height: 24px;
line-height: 24px;
padding: 6px;
list-style-type: none;
background-color: rgb(127, 127, 127);
cursor: pointer;
}

li ul {
position: absolute;
display: none;
}

li:hover {
background-color: rgb(163, 163, 163);
}

li:hover ul {
position: relative;
display: block;
top: -12px;
left: 114px;
z-index: 6;
}

li li {
background-color: rgb(191, 191, 191);
}

<ul>
<li>Menu Item 1
    <ul>
    <li>Submenu Item 1</li>
    <li>Submenu Item 2</li>
    <li>Submenu Item 3</li>
    </ul>
</li>

<li>Menu Item 2
    <ul>
    <li>Submenu Item 1</li>
    <li>Submenu Item 2</li>
    <li>Submenu Item 3</li>
    </ul>
</li>

<li>Menu Item 3
    <ul>
    <li>Submenu Item 1</li>
    <li>Submenu Item 2</li>
    <li>Submenu Item 3</li>
    </ul>
</li>
</ul>

CSS选择器使引导下拉菜单显示在悬停上

3 个答案: