Question

我在添加hover.css效果方面遇到了问题，我从here获得了这些效果。

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

在 NAV BAR 中，您会看到两个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 directory文件，以防您想要访问.css/.js。

希望有人可以帮助我，有很多人谢谢！：d

Answer 1

您需要做两件事

从您.pos-menu的{{1}}元素中删除填充。这将确保内部的<li>标记获得全宽。

<a>

更新您的HTML，如下所示。 .pos-menu { border: 1px solid #DF1E34; border-radius: 50px; margin-right: 10px; overflow: hidden; }应位于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

希望它有所帮助。

具有“hover.css”效果的自定义Mega菜单（帮助）

1 个答案: