Can anyone explain why this button loses its background color when I hover over it?
Here is the code for the button:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "ClassWeb", "/" ,:class=>"navbar-brand" %>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<% if user_signed_in? %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Events<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li style=""><%= link_to "My Events", current_user %></li>
<li style=""><%= link_to "New Event", new_event_url %></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My Account<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><%= link_to "My page", current_user %></li>
<li><%= link_to "Logout", destroy_user_session_path , method: :delete %></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Create Event", new_event_url, class: "btn btn-info" ,role: "button" %> </li>
</ul>
<% else %>
<li><%= link_to('Login', new_user_session_path) %></li>
</ul>
<% end %>
</div>
</nav>
Below are the styles applied to the ul, li, and anchor elements. I have checked it multiple times but couldn't find the reason for this problem. Your insights would be greatly appreciated:
(Inserted CSS code here)
If you have any suggestions or advice, please let me know. Thank you!