CSS 下拉菜單與 Hover 效果

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

為了清楚起見，下拉菜單已經可以正常工作，我已經可以識別“活動”菜單項。 我似乎無法弄清楚如何結合更改 hover 上的背景顏色和在活動菜單項上添加邊框頂部而不以某種方式弄亂菜單的樣式（在 hover 上留下 2px 高的空白空間，或者讓 hover 背景屬性覆蓋活動項目上的border-top屬性）

我還應該補充一下，僅限 CSS 的解決方案。

在這里的任何幫助將不勝感激。

Answer 1

對於背景顏色，它相當簡單，只需使用類似這樣的代碼：

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

至於邊界效應，這在語義上有點難，但我覺得這篇關於 CSS 特異性的文章可以解決問題。 基本上，它涉及向您的正文添加一個id ，然后在 CSS 中引用該id ，以便只有特定頁面會受到影響。

編輯：如果您的頂部邊框影響布局時遇到問題（我不知道導航的方向），請嘗試將每個項目的邊距或填充減少邊框的大小（2px，在這種情況下) 以保持整體盒子高度。 如果您沒有任何邊距/填充，請嘗試負邊距。