css - 如何在悬停到父菜单项时打开子菜单

Question

我正在开发 wp 主题并为导航编码。一切看起来都不错，但是当我将鼠标悬停在菜单项上时，它不会打开子菜单。我认为我的 css 编码存在一些问题。请你帮助我好吗。

.f-nav .menu {
    background-color: hotpink;
    list-style: none;
    display: flex;
    margin-right: 1rem;
    color: white;

    > .menu-item {
        margin: 0;
        > a {
            padding: 1rem;
            border-bottom: none;
            display: block;
            color: #fff;
            border-left: 1px solid #222;
            }
        &:hover a, &.open > a {
            background: #fff;
            color: #000;
        }

        > .sub-menu {
            position: absolute;
            margin: 0;
            list-style: none;
            background: #fff;
            display: none;
            min-width: 200px;
            border: 1px solid #efefef;
            border-top-color: #fff;
            z-index: 10;
        }
    }   
    nav {
        position: relative;
    }
    .current-menu-item {
        background-color: red;
    }
    .menu-item-home {
        background-color: blue;
 }
}

标签： csswordpresssass

Answer 1

只需确保在悬停时，您将显示它： 添加到您的代码中：

&:hover a, &.open > a {
        background: #fff;
        color: #000;
    .sub-menu { display: block} /* <-- Add this line*/
    }