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像素高的彩色边框。

为了清楚起见，下拉列表已经正常工作，我已经可以识别“活动”菜单项。我似乎无法弄清楚如何组合更改悬停时的背景颜色和在活动菜单项上添加border-top而不会弄乱菜单的样式（在悬停时留下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）以保持整体框高度。如果您没有任何边距/填充，请尝试使用负边距。

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

1 个答案: