具有"hover.css"效果的自定义超级菜单(帮助)

Question

我在添加hover.css效果时遇到问题，这是我从这里得到的。

首先，这是我创建的示例 HTML。

在导航栏中，您将看到两个Personal按钮。一个是悬停效果，另一个没有悬停效果，但有Mega Dropdown Menu .

其次，我要做的是将悬停效果添加到第二个Personal按钮中。

<li class="droppable nav-item pos-menu hvr-sweep-to-bottom">
    <a class="nav-link personal-hover" href="#">Personal</a>
        <div class="mega-menu personal-menu-content">
        ...
        </div>
    ...
    </a>
</li>

每次我尝试将hvr-sweep-to-bottom class添加到<li>中时，下拉菜单将始终消失。

这是HTML目录文件，以防您想访问.css/.js。

希望有人能帮助我解决这个问题，非常感谢！ :D

Answer 1

你需要做两件事

从作为您的<li>的.pos-menu元素中删除填充。这将确保内部的<a>标签获得全宽。

.pos-menu {
    border: 1px solid #DF1E34;
    border-radius: 50px;
    margin-right: 10px;
    overflow: hidden;
}

更新您的 HTML，如下所示。hvr-sweep-to-bottom应该在<a>上。

<li class="droppable nav-item pos-menu">
    <a class="nav-link personal-hover hvr-sweep-to-bottom" href="#">Personal</a>
    <div class="mega-menu personal-menu-content">
        ...
    </div>
    ...
</li>

在光标停留在mega-menu内时保持悬停效果

.pos-menu:hover .hvr-sweep-to-bottom { 
    background: rgba(0,0,0,.7); 
}

希望它有帮助。