Question

我的菜单是这样的：

<section class="top-bar-section">
 <ul class="left">
  <li class="menu-item menu-item-main-menu menu-item-cine-suntem has-dropdown not-click" id="menu-item-60"><a href="#">TopLevel Menu</a>
   <ul class="dropdown">
    <li class="menu-item menu-item-main-menu menu-item-misiuneviziune" id="menu-item-66"><a href="#">SubLevel Menu</a></li>
   </ul>
</ul>

当我将鼠标悬停在TopLevel菜单

上时，会出现黑色箭头的CSS

.top-bar-section .has-dropdown > a:hover:after{
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: #000 transparent transparent transparent;
        border-top-style: solid;
        margin-top: 22px;
        z-index:999;
      }

当我将该菜单项的子元素悬停时，如何让该箭头保持可见，因为现在当我开始盘旋该子项时，父项目中的箭头就会消失。

Answer 1

将悬停用于list-item，即li:hover，以达到您要查找的内容，因为这将选择父级，以便仅在子元素悬停时显示悬停。

PS：您提供的上述标记是锯齿状且不正确。您需要更正它才能使代码正常工作。

Answer 2

更改

.top-bar-section .has-dropdown > a:hover:after{...}
.top-bar-section li a:hover, .top-bar-section .dropdown li a:hover{background:#c1212e;}

到

.top-bar-section .has-dropdown:hover > a:after {...}
.top-bar-section li:hover a, .top-bar-section .dropdown li:hover a{background:#c1212e;}

注意：

HTML标记中缺少结束标记。这是一种不好的做法。

DEMO here.

当悬停子元素时，保持父元素的悬停状态

2 个答案: