Lose relationship from parent border CSS color

I need my submenu links to have a different border-color than the parents list one.

My menu

<ul id="menu">
<li><a href="#">Link</a></开发者_运维技巧li>
<li><a href="#">Link</a></li>
<li class="menuActive"><a href="#">Link</a>
    <ul class='children'>
        <li><a href="#">subLink</a></li>
        <li><a href="#">subLink</a></li>
        <li><a href="#">subLink</a></li>
    </ul>
</li>
</ul>

My CSS :

#menu li a{
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:red;
text-decoration:none;
}

.children li a{
border-bottom-color:blue;
background:lightgray;
}

As you can see, my subLinks get red border, how can set blue ones just for them ? See it in jsFiddle

Use #menu .children a.

This is a problem concerning specificity.

Live Demo

You need to read up on CSS Specificity http://css-tricks.com/specifics-on-css-specificity/