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

我正在Drupal上使用Bootstrap创建一个菜单，但是我很难让下拉菜单在hover上工作。 当您将鼠标悬停在主菜单项上时，它下面会出现一个下拉菜单。下拉菜单和主菜单都在运行，但下拉菜单当前始终显示在屏幕上。我想使用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>

---

menu类是所有菜单的父类，它应该是

            .menu ul {
            display:none;
            }

$（文档）.ready（函数（）{
$（“.menu li a”）.hover（函数（）{
$（this.next（）.show（）；
}).mouseout（函数（）{
$（this.next（）.hide（）；
});
});
.menu-ul{
显示：无；
}





























这里有一个简单的
：基于悬停的下拉菜单，只使用CSS-无需脚本：


ul{
保证金：0；
填充：0；
}
李{
位置：相对位置；
显示：块；
宽度：120px；
高度：24px；
线高：24px；
填充：6px；
列表样式类型：无；
背景色：rgb（127127127）；
光标：指针；
}
李乌尔{
位置：绝对位置；
显示：无；
}
李：悬停{
背景色：rgb（163163）；
}
李：悬停{
位置：相对位置；
显示：块；
顶部：-12px；
左：114px；
z指数：6；
}
李莉{
背景色：rgb（191191191191）；
}

菜单项1

子菜单项1
子菜单项2
子菜单项3


菜单项2

子菜单项1
子菜单项2
子菜单项3


菜单项3

子菜单项1
子菜单项2
子菜单项3


您的标记中有严重错误，它永远不会作为下拉菜单工作-因此担心悬停和替代CSS有点为时过早。如果可能，您能否更具体地说明标记中的错误？
            .menu ul {
            display:none;
            }