Question

我悬停下拉项目后背景颜色（红色）未命中。

如何保持我所在菜单项的背景颜色？

<style>

    nav ul 
    {
    list-style-type:none;
    padding:0px;
    text-align:center;
    background-color:grey;
    }

    nav ul li 
    {
    display:inline-block;
    }

    nav ul a 
    {
    display:block;
    padding:20px;
    padding-left:50px;
    padding-right:50px;
    text-decoration:none;
    color:black;
    text-transform:uppercase;
    font-family:arial;
    font-size:20px;
    }

    nav ul a:hover 
    {
    background:red;
    }

    nav ul ul {
        display: none;
    }

        nav ul li:hover ul{
            display:block;
            position:absolute;
    }

        nav ul ul li
        {
        display:block;
        border-bottom:solid 1px black;
        }

</style>
</head>

<body>

    <nav>
        <ul>
            <li><a href="#">one</a></li>
            <li><a href="#">two</a>
                <ul>
                    <li><a href="#">Photoshop</a></li>
                    <li><a href="#">Illustrator</a></li>
                    <li><a href="#">Web Design</a></li>
                </ul>
            </li>
            <li><a href="#">three</a>
                <ul>
                    <li><a href="#">ay</a></li>
                    <li><a href="#">bee</a></li>
                </ul>
            </li>
            <li><a href="#">four</a></li>
        </ul>
    </nav>

</body>

Answer 1

这是因为父li没有吸引:hover，因此在子子菜单上悬停并不会保持活动状态。因此，您需要将样式更改移至li:hover而不是a子项，因为子菜单是a的兄弟，而不是直接子项。

变化：

nav ul a:hover {
    background:red;
}

要：

nav ul li:hover {
    background:red;
}

导航。酒吧徘徊的颜色

1 个答案:

Demo Fiddle