html - 视频干扰 :hover

Question

我在我的网站标题中使用了一个下拉菜单:hover。只要下面没有视频，菜单就可以正常工作。

当（且仅当）下方有视频时，将指针移到下拉菜单上时，菜单会关闭。据我了解，该视频干扰了悬停功能。

它应该与 没有任何关系z-index，因为菜单显示在视频顶部，除非也将鼠标悬停在它上面。

视频的 HTML：

<video controls>
    <source src="../video.mp4" type="video/mp4">
</video>

下拉列表的 HTML：

<li class="login">
    <div class="dropdown">
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
    </div>
</li>

下拉CSS：

.dropdown {
    display: none;
    position: absolute;
    background-color: black;
    z-index: 1;
}

.login:hover .dropdown { display: block; }

标签： htmlcss