Question

我正在尝试在 CSS 中创建标签菜单并默认显示第一个菜单。当您将鼠标悬停在其他菜单项上时，我需要它隐藏默认显示的菜单项并显示所选菜单项的菜单。

如何隐藏鼠标悬停时默认显示的内容？

  .sau-c-nav-side{
        nav{
            ul{
                li{
                    height: 50px;
                }
                li:hover .sau-c-nav-side__sub{
                    display: block;
                }
            }
            .sau-c-nav-side__sub{
                display: none;
                position: absolute;
                top:80px;
                bottom: 0;
                left:150px;
                &.active{
                    display: block;
                }
            }
        }
    }

               <div class="sau-c-nav-side">
                    <nav>
                        <ul>
                            <li><a href="#">Menu1</a>
                                <ul class="sau-c-nav-side__sub active">
                                    <li><a href="#">item1-menu1</a></li>
                                    <li><a href="#">item2-menu1</a></li>
                                    <li><a href="#">item3-menu1</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Menu2</a>
                                <ul class="sau-c-nav-side__sub">
                                    <li><a href="#">item1-menu2</a></li>
                                    <li><a href="#">item2-menu2</a></li>
                                    <li><a href="#">item3-menu2</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Menu3</a>
                                <ul class="sau-c-nav-side__sub">
                                    <li><a href="#">item1-menu3</a></li>
                                    <li><a href="#">item2-menu3</a></li>
                                    <li><a href="#">item3-menu3</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>

Answer 1

当您将鼠标悬停在整个 li 上时，您需要隐藏第一个 ul。然后将您的 li:hover 调整为 ul:hover li:hover

这将使 li:first-child 在没有悬停时继续显示。

抱歉，在我的代码段中，我必须将代码转换为纯 CSS 才能运行。

此外，我重新排列了级联的规则，使其按照您的意愿工作。

.sau-c-nav-side nav ul li{
    height: 50px;
}
.sau-c-nav-side nav li:first-child .sau-c-nav-side__sub{
  display: block;
}
.sau-c-nav-side nav ul:hover li:first-child .sau-c-nav-side__sub{
display: none;
}
.sau-c-nav-side nav ul:hover li:hover .sau-c-nav-side__sub{
    display: block;
}

.sau-c-nav-side nav .sau-c-nav-side__sub{
  display: none;
  position: absolute;
  top:80px;
  bottom: 0;
  left:150px;
}

<div class="sau-c-nav-side">
    <nav>
        <ul>
            <li><a href="#">Menu1</a>
                <ul class="sau-c-nav-side__sub active">
                    <li><a href="#">item1-menu1</a></li>
                    <li><a href="#">item2-menu1</a></li>
                    <li><a href="#">item3-menu1</a></li>
                </ul>
            </li>
            <li><a href="#">Menu2</a>
                <ul class="sau-c-nav-side__sub">
                    <li><a href="#">item1-menu2</a></li>
                    <li><a href="#">item2-menu2</a></li>
                    <li><a href="#">item3-menu2</a></li>
                </ul>
            </li>
            <li><a href="#">Menu3</a>
                <ul class="sau-c-nav-side__sub">
                    <li><a href="#">item1-menu3</a></li>
                    <li><a href="#">item2-menu3</a></li>
                    <li><a href="#">item3-menu3</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

显示和隐藏菜单

1 个答案: