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
これは、何らかの理由で、ドロップダウンメニューの2番目（またはそれ以下）の項目にマウスを移動しようとすると、自分のコードでドロップダウンが消えてしまうことを除いて、完全に機能します。思考？ – Liz