更改标签的背景色

Question

I have a very basic menu structure built in HTML....

<ul id="menu-navigation">
    <li id="menu-item-1">
        Menu Item 1
    </li>
    <li id="menu-item-2" class="current-menu-item">
        <a href="#">Menu Item 2</a>
        <ul class="sub-menu">
            <li class="sub-1"><a href="#">Sub-menu Item 1</a></li>
            <li class="sub-2"><a href="#">Sub-menu Item 2</a></li>
            <li class="sub-3"><a href="#">Sub-menu Item 3</a></li>
        </ul>
    </li>
    <li id="menu-item-3">
        Menu Item 3
    </li>
    <li id="menu-item-4">
        Menu Item 4
    </li>
</ul>

I am trying to target just the a tag called Menu Item 2 using...

#menu-navigation .current-menu-item a{background:blue;}

But this is also turning all of the links in the sub-menu blue as well. How can I target just the first a tag?

Answer 1

#menu-navigation .current-menu-item > a {
    background:blue;
}

Take a look: http://css-tricks.com/child-and-sibling-selectors/

Answer 2

Use the child selector :

#menu-navigation .current-menu-item > a {
    background: blue;
}