带有悬停效果的 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 高的空白空间，或者让悬停背景属性覆盖活动项目上的边框顶部属性）

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

我们将不胜感激。

Answer 1

对于背景颜色，比较简单，使用类似这样的代码即可：

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

至于边框效果，这在语义上有点难做，但我觉得this article on CSS specificity 可以解决问题。基本上，它涉及在您的正文中添加一个id，然后在 CSS 中引用该id，以便只有特定页面会受到影响。

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