0
我在我的Rails应用程序中有一个下拉菜单（理想情况下）应该在您将鼠标悬停在父项li上时显示。但是，我使用的仅限CSS的方法似乎不适用于我的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工作？
不幸的是，即使这个变化它不显示。此外，“工具”“li”的原始点击功能不再有效。 – Liz
我在检查..它的工作..请稍候我尝试做一个片段后，我们谈论它。 – codesayan
除了出于某种原因，在我的代码上，当您尝试将鼠标向下拖动到下拉菜单上的第二个（或更低）项目时，下拉菜单会消失。思考？ – Liz