CSS List Drop Down Menu

Question

I am creating a simple drop down menu using css.

<ul>
    <li id="base"><a href="projects.php" class="button">Projects</a>
        <ul>
            <li>Project 1</li>
            <li>Project 2</li>
        </ul>
    </li>
</ul>

What I can't figure out is, how can I get the anchor text "Projects" to change it's background correctly to indicate you're browsing under that list.

If I apply a background effect to li#base,

li#base:hover {
    background: #4b4b4b;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
}

I get this undesired background if I am hovering over "Project 1" or "Project 2":
undesired

The image below is how I am wanting it to look, but this is with the hover pseudoclass applied to the anchor instead of li#base (which will only stay highlighted when I am over the link and not the whole list):
desired

I tried to present this in the simplest way I could think of...

Don Zacharias · Accepted Answer · 2011-06-15 04:12:39Z

1

You're setting the radius of all 4 corners. You want a rounded corner on just top right and top left.

-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;

answered Jun 15, 2011 at 4:12

Don Zacharias

1,5842 gold badges14 silver badges32 bronze badges

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

5 Comments

holyfsck Over a year ago

Thanks! Any clue on how to get the background to extend more upwards when it's applied to li#base? Padding and margin don't seem to do anything for that.

Don Zacharias Over a year ago

I'd have to see the rest of the HTML/CSS. Lists can be a pain because of the nesting and the browser defaults. It is usually helpful to use a CSS reset.

holyfsck Over a year ago

Could you take a look at the website in my profile if you have the chance? There isn't much to it yet, so there isn't too much to dig through.

holyfsck Over a year ago

Got it to work! For some reason I had to add it ul#nav li for it to work instead of using the base identifier. Thanks for your help!

Don Zacharias Over a year ago

That's a nice look. I think there was some cascading getting in your way. Although li#base:hover did seem to work...weird. Nice job!

Collectives™ on Stack Overflow

CSS List Drop Down Menu

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related