Question

我有以下HTML代码：

        <ul class="hover amazing-menu">
        <li>
            <a href="" class="link">item1</a>
        </li>
        <li class="parent-item">
            <a href="" class="link">item2 <span class="fa fa-caret-down"></span></a>
            <ul class="hover sub-menu">
                <li class="parent">
                    <a href="" class="link">sub-item1 <span class="fa fa-caret-right"></span></a>
                    <ul class="sub-menu2">
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>

以下风格：

.hover > li.parent-item:hover > ul.sub-menu, .hover > li.parent:hover > ul.sub-menu2{
opacity: 1 !important;}

当我将鼠标悬停在带有.parent-item类的元素时，我想显示子菜单。它工作正常，但当我将鼠标悬停在其子节点上时，会显示子菜单。

Answer 1

尝试使用display: none;并触发显示的元素：悬停上显示的内容。

请看这个例子：

＆＃13;

ul.sub-menu,
ul.sub-menu2 {
  display: none;
}

a:hover + ul.sub-menu,
a:hover + ul.sub-menu2,
ul.sub-menu:hover,
ul.sub-menu2:hover {
  display: block;
}

＆＃13;

        <ul class="hover amazing-menu">
        <li>
            <a href="" class="link">item1</a>
        </li>
        <li class="parent-item">
            <a href="" class="link">item2 <span class="fa fa-caret-down"></span></a>
            <ul class="hover sub-menu">
                <li class="parent">
                    <a href="" class="link">sub-item1 <span class="fa fa-caret-right"></span></a>
                    <ul class="sub-menu2">
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                        <li><a href="link">sub-item11</a></li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>

＆＃13;

<强> Fiddle example

为HOVER选择一个没有子元素的元素

1 个答案: