using CSS psuedo-class :first-child

Trying to set up a menu so that I have border-left on each menu item but the border is excluded from the first item.

site: http://www.rogersinternational.com

CSS:

#access {
 background: #414731;
 display: block;
 float: left;
 margin: 0 auto;
 width: 900px;
 height: 42px;
 text-transform: uppercase;
}
#access .menu-header,
div.menu {
 font-size: 13px;
 margin-left: 14px;
 width: 900px;
}
#access .menu-header ul,
div.menu ul {
 list-style: none;
 margin: 0;
}
#access .menu-header li,
div.menu li {
 float: left;
 position: relative;
}
#access a {
 color: #a5af86;
 line-height: 38px;
 padding: 0 16px;
 text-decoration: none;
 border-left: 1px solid #5e6549;
}
#access a:first-child { border: none }
#access ul ul {
 box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 display: none;
 position: absolute;
 top: 38px;
 left: 0;
 float: left;
 width: 180px;
 z-index: 99999;
}
#access ul ul li { min-width: 180px }
#access ul ul ul {
 left: 100%;
 top: 0;
}
#access ul ul a {
 background: #414731;
 line-height: 1em;
 padding: 10px;
 width: 160px;
 height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
 background: #414731;
 color: #fff;
}

Menu:

<div class="menu">
    <ul>
        <li><a href="http://www.rogersinternational.com/">Home</a></li>
        <li><a href="http://www.rogersinternational.com/about">Company Profile</a></li>
        <li><a href="http://www.rogersinternational.com/products">Products</a></li>
        <li><a href="http://www.rogersinternational.com/solutions">Solutions</a></li>
        <li><a href="http://www.rogersinternational.com/photo-gallery">Photo Gallery</a></li>
        <li><a href="http://www.rogersinternational.com/technical-specs">Technical Specs</a></li>
        <li><a href="http://www.rogersinternational.com/contact">Contact</a></li>
    </ul>
</div>

I can get it to recognize the psuedo-class in firebug, but the effect doesn开发者_如何学编程't take place. Your help is appreciated.

---

.menu li:first-child a{
    border: none!important;
}

Same result you will get with that:

#access .menu li:first-child a{
    border: none;
}

For explanation:

Your Border was defined here:

#access a {
    border-left: 1px solid #5E6549;
    …
}

.menu li:first-child won't match because the border is not defined here.

.menu li:first-child a won't work because #access a has an higher specifty.

So you have to increase the specifty by adding the !important rule

---

You could also put an id on your first li:

<li id="first">

and edit your style like so:

#access #first a { border: none }

i made those changes here: http://jsbin.com/oyafe3

---

Apply the border to all the elements. Then remove it from the first-child.

.menu li { border-left:1px solid black; }
.menu li:first-child { border-left:none; }