I can't seem to figure out the right CSS syntax to customize my navbar links when hovering. Here is my navbar structure:
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account | <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "User", current_user %></li>
<li><%= link_to "Update", edit_user_path(current_user) %></li>
</ul>
<li><%= link_to "Logout", logout_path, method: "delete" %></li>
I've successfully applied the correct hovering effect on the dropdown menu with
.dropdown:hover {
background:#3b3535;
color: #ece6e6;
}
Now I want to achieve the same effect on my "Home" and "Logout" links. I attempted
.navbar-nav:hover {
background:#3b3535;
color: #ece6e6;
}
but all three links ("Home", "Account", and "logout") get hovered at once. I've tried various options like:
#navbar-nav ul li a:hover {
background:#3b3535;
color: #ece6e6;
}
.navbar-nav ul.nav li:hover a{
background:#3b3535;
color: #ece6e6;
}
.ul.nav li a:hover {
background:#3b3535;
color: #ece6e6;
}
However, none of them seem to work. Can you provide me with the correct syntax to achieve the desired hovering effect? Thank you.