Question

我正在使用css创建一个简单的下拉菜单。

<ul>
    <li id="base"><a href="projects.php" class="button">Projects</a>
        <ul>
            <li>Project 1</li>
            <li>Project 2</li>
        </ul>
    </li>
</ul>

我无法弄清楚的是，我怎样才能获得锚文本“Projects”以正确更改其背景以表明您正在该列表下浏览。

如果我将背景效果应用于li＃base，

li#base:hover {
    background: #4b4b4b;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
}

如果我将鼠标悬停在“Project 1”或“Project 2”上，我会得到这个不受欢迎的背景：
undesired

下面的图片是我希望它看起来的样子，但这是将悬停的伪类应用于锚而不是li＃base（只有在我通过链接而不是整个列表时才会保持突出显示）：
desired

我试图以我能想到的最简单的方式呈现这一点......

Answer 1

您正在设置所有4个角的半径。你想要在右上角和左上角有一个圆角。

-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;

CSS列表下拉菜单

1 个答案: