html - 具有悬停效果的 CSS 下拉菜单

Question

我有一个基于 css 的水平下拉菜单，效果非常好，但我在添加效果时遇到了问题，该效果会在表示用户当前所在页面的元素上添加顶部边框。这是下拉菜单的 HTML 代码:

<ul id="browse">
    <li>
        <a href="/comedy/">Comedy</a>
        <ul>
            <li><a href="/caddyshack/">Caddyshack</a></li>
            <li><a href="/backtoschool/">Back to School</a></li>
        <ul>
    </li>
    <li>
        <a href="/80s/">80s</a>
        <ul>
            <li><a href="/diehard/">Die Hard</a></li>
            <li><a href="/overboard/">Overboard</a></li>
        <ul>
    </li>
</ul>

这是我想要的:

• 将鼠标悬停在元素上会更改其背景颜色，以及下拉菜单的背景(嵌套的 ul 元素)

• 在元素的事件页面上，该元素的顶部应该有一个 2 像素高的彩色边框。

需要说明的是，下拉菜单已经可以正常工作，而且我已经可以识别“事件”菜单项。我似乎无法弄清楚如何结合更改悬停时的背景颜色和在事件菜单项上添加边框顶部而不以某种方式弄乱菜单的样式(悬停时留下 2px 高的空白区域，或者让悬停背景属性覆盖事件元素上的 border-top 属性)

我还应该补充一下，请使用纯 CSS 解决方案。

如有任何帮助，我们将不胜感激。

Answer 1

对于背景色来说，很简单，使用类似这样的代码即可:

#browse a:hover {
     background-color: fuchsia; /*Whatever your background color is*/
}

至于边框效果，从语义上讲有点难，但我觉得this article on CSS specificity会成功的。基本上，它涉及向您的主体添加一个 id，然后在 CSS 中引用该 id，这样只有特定的页面才会受到影响。

编辑:如果您遇到影响布局的顶部边框问题(我不知道导航的方向)，请尝试通过边框的大小(在本例中为 2px)以保持整个框的高度。如果您没有任何边距/填充，请尝试使用负边距。