Html 引导下拉悬停不工作

我的Rails应用程序中有一个下拉菜单，当您将鼠标悬停在父项

li

上时（理想情况下）应该会显示该菜单。然而，我使用的CSS唯一方法似乎不适用于我的HTML，尽管我不明白为什么

这里有一个例子来说明这个问题

以下是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 -->

---

任何人都能看到这不起作用的原因或让代码笔起作用吗？

请检查我的更新答案，如果它不起作用，请向我说明你想要什么行为

#main-nav.navbar-default a.navbar-brand{
填充顶部：0px；
z指数：30；
}
#main-nav.navbar-default{
背景色：$透明白色；
边界：无；
高度：80px；
}
#main-nav.navbar-default img{
高度：40px；
利润上限：-10px；
右边距：10px；
}
#main-nav.navbar-default h1{
边缘顶部：20px；
}
#main-nav.navbar-default.navbar nav>li>a{
颜色：$灰色；
字体系列：$font hand；
字体大小：22px；
填充顶部：20px；
垫底：10px；
}
#main-nav.navbar-default.navbar导航{
文本对齐：居中；
填充顶部：15px；
}
#main-nav.navbar-default.navbar nav>li>a：悬停，
#main-nav.navbar-default.navbar nav>li>a：焦点{
颜色：$红色；
}
@媒体屏幕和屏幕（最大宽度：768px）{
#main-nav.navbar-default.navbar导航{
底边：$灰色实薄；
垫底：15px；
}
}
#main-nav.navbar-default.navbar切换{
边缘顶部：20px；
边框颜色：$红色；
边缘底部：24px；
}
#main-nav.navbar-default.navbar切换：悬停，
#main-nav.navbar-default.navbar切换：焦点{
}
#main-nav.navbar-default.navbar切换。图标栏{
背景颜色：$红色；
}
#main-nav.navbar-default.navbar切换：悬停，
#main-nav.navbar-default.navbar切换：焦点{
边框颜色：$蓝色；
}
#main-nav.navbar-default.navbar切换：悬停图标栏，
#main-nav.navbar-default.navbar切换：焦点。图标栏{
背景颜色：$蓝色；
}
#主导航下拉菜单：li{
文本对齐：左对齐；
}
#主导航下拉菜单：悬停下拉菜单{
显示：块；
边际上限：0；
z指数：100；
}

切换导航

下拉菜单

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>

---

要更改此格式，请使用上面的代码并包含下拉脚本

，不幸的是，即使进行了此更改，它也不会显示出来。另外，“工具”

li

原来的点击功能也不起作用了。我正在检查。。它起作用了。。请稍候，在我们讨论它之后，我正在尝试制作一个片段。这非常有效，除非出于某种原因，在我的代码中，当您尝试将鼠标移到下拉菜单上的第二个（或更低）项时，下拉菜单消失。想法？我做了这些改变，但仍然没有出现。是否与雇员再培训局有关？或者我的CSS中的其他地方？

<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>