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…

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