Bootstrap Dropdown悬停不起作用

Question

我的Rails应用程序中有一个下拉菜单，当你悬停父li时（理想情况下）应显示该菜单。但是，我使用的CSS-only方法似乎并不适用于我的HTML，但我不明白为什么。

这里有一个codepen来说明问题。

这是HTML / ERB菜单：

<div id="main-nav" class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <%= link_to root_path, class: "navbar-brand" do %>
                <div style="display: inline-block;">
                    <%= image_tag "logo_simple.png", alt: "Family Zone Logo" %>
                </div>
                <div style="display: inline-block;">
                    <% if current_user %>
                        <h2>
                            <span class="color-red font-hand"><%= current_user.last_name %></span>
                            <span class="color-blue font-hand">Zone</span>
                        </h2>
                    <% else %>
                        <h2>
                            <span class="color-red font-hand">Family</span>
                            <span class="color-blue font-hand">Zone</span>
                        </h2>
                    <% end %>
                </div>
            <% end %>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div> <!-- navbar-header -->
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-right">
                <li class="hvr-grow"><%= link_to "Home", root_path %></li>
                <li class="hvr-grow"><%= link_to "To Do", tasks_path %></li>
                <li class="hvr-grow"><%= link_to "Scheduling", blogs_path %></li>
                <li class="hvr-grow" id="dropdown-li"><%= link_to 'Tools', home_tools_path, { :class => 'dropdown-toggle', 'data-toggle' => 'dropdown', 'aria-haspopup' => true, 'aria-expanded' => false, 'role' => "button" } %></li>
                  <ul class="dropdown-menu">
                    <li><%= link_to "Grocery List", groceries_path %></li>
                    <li><%= link_to "Meal Planning", mealplans_path %></li>
                    <li><%= link_to "Recipe Box", recipes_path %></li>
                  </ul>
                <li class="hvr-grow"><%= link_to "Research", blogs_path %></li>
                <% if current_user %>
                    <li class="hvr-grow"><%= link_to "Me", user_path(current_user) %></li>
                <% else %>
                    <li class="hvr-grow"><%= link_to "Family Login", new_user_session_path %></li>
                <% end %>
            </ul>
        </div> <!-- collapse -->
    </div> <!-- container-fluid -->
</div> <!-- main-nav -->

这是我目前的CSS：

#main-nav.navbar-default a.navbar-brand {
    padding-top: 0px;
    z-index: 30;
}

#main-nav.navbar-default {
    background-color: $transparent-white;
    border: none;
    height: 80px;
}

#main-nav.navbar-default img {
    height: 40px;
    margin-top: -10px;
  margin-right: 10px;
}

#main-nav.navbar-default h1 {
    margin-top: 20px;
}

#main-nav.navbar-default .navbar-nav>li>a {
    color: $grey;
    font-family: $font-hand;
    font-size: 22px;
    padding-top: 20px;
    padding-bottom: 10px;
}

#main-nav.navbar-default .navbar-nav {
    text-align: center;
    padding-top: 15px;
}

#main-nav.navbar-default .navbar-nav>li>a:hover,
#main-nav.navbar-default .navbar-nav>li>a:focus {
  color: $red;
}


@media screen and (max-width: 768px) {
  #main-nav.navbar-default .navbar-nav {
    border-bottom: $grey solid thin;
    padding-bottom: 15px;
  }
}

#main-nav.navbar-default .navbar-toggle {
    margin-top: 20px;
  border-color: $red;
  margin-bottom: 24px;
}

#main-nav.navbar-default .navbar-toggle:hover,
#main-nav.navbar-default .navbar-toggle:focus {
}

#main-nav.navbar-default .navbar-toggle .icon-bar {
    background-color: $red;
}

#main-nav.navbar-default .navbar-toggle:hover,
#main-nav.navbar-default .navbar-toggle:focus {
    border-color: $blue;
}

#main-nav.navbar-default .navbar-toggle:hover .icon-bar,
#main-nav.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: $blue;
}

#main-nav .dropdown-menu:li {
    text-align: left;
}

#main-nav #dropdown-li:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    z-index: 100;
 }

任何人都可以看到为什么这不起作用或让codepen工作？

Answer 1

请检查我的更新答案，如果它不起作用请告诉我你想要的行为，

#main-nav.navbar-default a.navbar-brand {
    padding-top: 0px;
    z-index: 30;
}

#main-nav.navbar-default {
    background-color: $transparent-white;
    border: none;
    height: 80px;
}

#main-nav.navbar-default img {
	height: 40px;
	margin-top: -10px;
  margin-right: 10px;
}

#main-nav.navbar-default h1 {
	margin-top: 20px;
}

#main-nav.navbar-default .navbar-nav>li>a {
    color: $grey;
    font-family: $font-hand;
    font-size: 22px;
    padding-top: 20px;
    padding-bottom: 10px;
}

#main-nav.navbar-default .navbar-nav {
	text-align: center;
    padding-top: 15px;
}

#main-nav.navbar-default .navbar-nav>li>a:hover,
#main-nav.navbar-default .navbar-nav>li>a:focus {
  color: $red;
}


@media screen and (max-width: 768px) {
  #main-nav.navbar-default .navbar-nav {
    border-bottom: $grey solid thin;
    padding-bottom: 15px;
  }
}

#main-nav.navbar-default .navbar-toggle {
	margin-top: 20px;
  border-color: $red;
  margin-bottom: 24px;
}

#main-nav.navbar-default .navbar-toggle:hover,
#main-nav.navbar-default .navbar-toggle:focus {
}

#main-nav.navbar-default .navbar-toggle .icon-bar {
    background-color: $red;
}

#main-nav.navbar-default .navbar-toggle:hover,
#main-nav.navbar-default .navbar-toggle:focus {
	border-color: $blue;
}

#main-nav.navbar-default .navbar-toggle:hover .icon-bar,
#main-nav.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: $blue;
}

#main-nav .dropdown-menu:li {
    text-align: left;
}

#main-nav .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    z-index: 100;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Fixed navbar -->
    <nav id="main-nav" class="navbar navbar-default navbar-static-top">
      <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="https://getbootstrap.com/examples/theme/#">Bootstrap theme</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="https://getbootstrap.com/examples/theme/#">Home</a></li>
            <li><a href="https://getbootstrap.com/examples/theme/#about">About</a></li>
            <li><a href="https://getbootstrap.com/examples/theme/#contact">Contact</a></li>
            <li class="dropdown">
              <a href="https://getbootstrap.com/examples/theme/#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="https://getbootstrap.com/examples/theme/#">Action</a></li>
                <li><a href="https://getbootstrap.com/examples/theme/#">Another action</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Answer 2

下拉菜单li无法正确关闭

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>             
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>                
</li>

更改此格式使用上面的代码并包括下拉脚本