I recently came across a helpful thread on Stack Overflow regarding CSS hover effects only triggering on click. I have implemented a Bootstrap4 dropdown-menu with a hover effect to display the dropdown items.
.my-menu ul li {
list-style: none;
color: #fff;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 12px;
display: inline;
}
.my-menu ul li a {
text-decoration: none;
color: #000;
text-transform: uppercase;
letter-spacing: .2em;
font-size: 12px;
}
.dropdown-menu {
border-style: none!important;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)!important;
}
.my-menu ul li:hover .dropdown-menu {
display: block!important;
}<div class="my-menu">
<ul>
<li>
<a href="" class="pr-2 dropdown-toggle" data-toggle='dropdown' aria-haspopup="true" aria-expanded="false">Account <i class="fas fa-user-circle"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{% url 'accounts:register' %}">Register</a>
<a class="dropdown-item" href="{% url 'accounts:login' %}">Login</a>
</div>
</li>
</ul>
</div>Although the hover effect is functioning, it requires a click to initialize, and I'm unsure why. It seems like Bootstrap4 Dropdowns may have compatibility issues with hover effects, or perhaps I made an error in my implementation. I initially thought about creating my own custom dropdown-menu, but wanted to seek a quick solution here first.