CSS: эффект наведения должен быть инициализирован нажатием

Question

Я прочитал ответы на этот вопрос: CSS Hover эффект только при нажатии . У меня есть bootstrap4 dropdown-menu, и я добавил hover effect поверх него, чтобы отобразить 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>

Эффект парения работает, но для инициализации ему необходим click, и я не знаю, почему он это делает.

Либо Bootstrap4 Dropdowns не работают должным образом с эффектом наведения, либо я делаю что-то не так. Первое решение, которое пришло мне в голову, - это создать свой собственный dropdown-menu с нуля; но я хотел приехать сюда, чтобы узнать, смогу ли я получить быстрое решение.

Answer 1

Вам необходимо присвоить элементу li свойство position: relative.

.my-menu ul li {
    position: relative;
}