视频干扰：hover

如何解决视频干扰：hover

我已使用: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; }