CSS：悬停效果必须通过“点击”进行初始化

Question

我已经阅读了这个问题的答案：CSS Hover effect only on click。我有一个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下拉列表无法正常使用悬停效果，或者我做错了什么。我想到的第一个解决方案是从头开始构建自己的dropdown-menu;但我想来这里看看能否快速解决问题。

Answer 1

你需要给li元素一个position: relative属性。

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