CSS Drop Down Menu with Hover Effect

Question

I've got a css-based horizontal drop down menu that works perfectly well, but I'm having trouble adding an effect that adds a top border on the item that represents the page the user is currently on. Here's the HTML code for the dropdown:

<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>

Here's what I want:

Hovering over an item changes its background color, as well as the background of the dropdown (the nested ul element)
On the active page for an item, that item should have a 2 pixel tall colored border at the top.

Just to be clear, the dropdown already works fine, and I can already identify the "active" menu item. I just can't seem to figure out how to combine changing the background color on hover and adding a border-top on the active menu item without messing up the style of the menu somehow (either leaving a 2px tall blank space on hover, or having the hover background property override the border-top property on the active item)

I should also add, CSS-only solutions please.

Any help here would be much appreciated.

So, what you're trying to achieve is to get the hovered item background color to change, and when you're on the page (ex: on the "diehard" page), its list item will already have a top border? — Nightfirecat
– Nightfirecat, Commented Jul 11, 2011 at 17:16
What is the problem with .active {border-top: 2px solid red;} for example? If you have spacing problems, use .active {outline-top: 2px solid red;} instead! — Jawad
– Jawad, Commented Jul 11, 2011 at 17:18
@Jawad because adding a border just on that item pushes it down below the other items that don't have a border. I need the menu to stay intact. — rolling stone
– rolling stone, Commented Jul 11, 2011 at 17:21
@Jawad also note that outline is the same on all sides. In contrast to borders, there is no 'outline-top' or 'outline-left' property. w3.org/TR/CSS2/ui.html — rolling stone
– rolling stone, Commented Jul 11, 2011 at 17:22
@rolling stone: Hard to say without the actual code. Maybe you can make space in there in such a way that the border does not "push" other items. Or as suggested, you could use the outline property. — Jawad
– Jawad, Commented Jul 11, 2011 at 17:24

Nightfirecat · Accepted Answer · 2011-07-11 17:21:20Z

1

For the background color, it's fairly simple, just use code similar to this:

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

As for the border effect, that's a little harder to do semantically, but I feel that this article on CSS specificity would do the trick. Basically, it involves adding an id to your body, and then referencing that id in the CSS so that only the specific pages will be affected.

EDIT: If you're having issues with your top border affecting layout (I don't know what orientation the navigation has), try reducing the margin or padding you have on each item by the size of your border (2px, in this case) to maintain overall box height. If you don't have any margins/paddings, try negative margins.

answered Jul 11, 2011 at 17:21

Nightfirecat

11.6k6 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rolling stone Over a year ago

thanks @nightfirecat. i already had the background color and using id to select the active item, the issue is with the edit you added. that's an interesting approach, will try reducing the padding-top and see how it goes.

rolling stone Over a year ago

nice, reducing the padding-top on the active element to offset the border-top worked like a charm! thanks! knew it had to be something simple like that...

Nightfirecat Over a year ago

Yup, no problem - often the trickiest things to figure out are the simple things.

Collectives™ on Stack Overflow

CSS Drop Down Menu with Hover Effect

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related