Cannot get the first/last-child to work on my nav menu.

[brookfloyd]

I am developing a site at http://mixnob.mybigcommerce.com/ and have run into a snag on my top navigation bar with my main category links. I am not a pro with css but can hack my way around pretty well. I know about the first and last child tags and know about using the first-child first if possible because of better compatibility. But for whatever reason I cannot get it to work to only shut off the first border-left. It shuts off all of them instead. Any help would be appreciated.

Here's some of the code.

HTML

<div id="HeaderUpper">
<div id="HeaderLower">
<div id="SideCategoryList" class="CategoryList">
<h2>Categories</h2>
<div class="SideCategoryListFlyout">
<ul class="sf-menu sf-vertical sf-js-enabled">
<li>
<a href="http://mixnob.mybigcommerce.com/home/">Home</a>
</li>
<li>
<a href="http://mixnob.mybigcommerce.com/virtual-instruments/">Virtual Instruments</a>
</li>
<li>
<a href="http://mixnob.mybigcommerce.com/plugins/">Plugins</a>
</li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>

CSS

#SideCategoryList li, #SideCategoryList .sf-menu li {
}
#SideCategoryList li:first-child {
border-left: 0 none;
}
#SideCategoryList li, #SideCategoryList .sf-menu li {
float: left !important;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: auto !important;
}
#SideCategoryList li, #SideCategoryList .sf-menu li {
}
#SideCategoryList li, #SideCategoryList .sf-menu li {
float: left !important;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: auto !important;
}
h1, h2, h3, .TitleHeading, .slide-text, #HeaderLower li, .ProductActionAdd, .ProductDetailsGrid .DetailRow.PriceRow .Value, .QuickViewBtn, .btn {
font-family: Arial,Verdana,Helvetica,Sans-serif;
}
.sf-vertical, .sf-vertical li {
width: 10em;
}
.sf-menu li {
float: left;
position: relative;

[Excavator]

Hello brookfloyd,
Try it like this -

#SideCategoryList li a, #SideCategoryList .sf-menu li a {
    /*border-left: 1px solid #FFFFFF;*/
    color: #FFFFFF;
    display: block;
    font: 16px Arial,Verdana,Helvetica,Sans-serif;
    padding: 8px 0 9px 30px;
    text-decoration: none;
}
#SideCategoryList li {border-left: 1px solid #fff;}
#SideCategoryList li:first-child {border-left: none;}

...
It kind of looks like you were putting two borders on your li's with this

#SideCategoryList li, #SideCategoryList .sf-menu li {
}

If that's the case, the CSS you had in place for removing the border on the :first-child removed only one border and did not remove the border off #SideCategoryList .sf-menu li



...
When posting code in the forum, please use the code tags, - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.