Selecting CSS3 Last Child Within Drop Down Menu Not Working - css

Question

Frustratingly not been able to resolve the CSS3 pseudo element 'last-child' that isn't working with this custom drop down navigation menu that we're working on currently.
Each drop down menu can be assigned a number of columns, in this instance, I am wanting to apply a right hand border to each column (.col_1) within the div .dropdown_3column.
CSS Snippet
.dropdown_1column_simple {width: 100px;}
.dropdown_2column_simple {width: 155px;}
.dropdown_1column {width: 550px;}
.dropdown_2column {width: 650px;}
.dropdown_3column {width: 500px;}
.dropdown_4column {width: 800px;}
.dropdown_5column {width: 1000px;}
.dropdown_2column_simple .col_1 {width:155px;}
.dropdown_2column_simple .col_2 {width:155px;}
.col_1 {width:145px; border-right: 1px solid #888;}
.col_2 {width:240px;}
.col_3 {width:490px;}
.col_4 {width:440px;}
.col_5 {width:575px;}
.col_s {width:250px;}
.col_1,.col_2,.col_3,.col_4,.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
/*border: 1px solid #000;*/
}
HTML Snippet
<div class="dropdown_3column align_left ">
<div class="col_3">
<div class="content_top"></div>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/addict-clothing.html">
<span class="level1">Addict Clothing </span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/atticus-clothing.html">
<span class="level1">Atticus Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dephect-clothing.html">
<span class="level1">Dephect Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dickies-clothing.html">
<span class="level1">Dickies</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dta-clothing.html">
<span class="level1">DTA Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/famous-stars-and-straps-clothing.html">
<span class="level1">Famous Stars And Straps Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/fuct-clothing.html">
<span class="level1">FUCT Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/hex-accessories.html">
<span class="level1">HEX Accessories</span>
</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/the-hundreds.html">
<span class="level1">The Hundreds</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/insight-clothing.html">
<span class="level1">Insight Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/jeepney-clothing.html">
<span class="level1">Jeepney Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/king-apparel.html">
<span class="level1">King Apparel</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/lrg-clothing.html">
<span class="level1">LRG Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/my-yard-clothing.html">
<span class="level1">My Yard</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/new-era-5950.html">
<span class="level1">New Era 5950 Hats and Apparel</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/pxl-clothing.html">
<span class="level1">PXL Clothing</span>
</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/rebel8-clothing.html">
<span class="level1">REBEL8 Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/ringspun-clothing.html">
<span class="level1">Ringspun</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/rogue-status-clothing.html">
<span class="level1">Rogue Status </span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/the-wild-ones-clothing.html">
<span class="level1">The Wild Ones</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/volcom-clothing.html">
<span class="level1">Volcom Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/zoo-york-clothing.html">
<span class="level1">Zoo York Clothing</span>
</a>
</li>
</ul>
</div>
<div class="col_3">
<div class="content_bottom"></div>
</div>
<div class="col_s">
<div class="content_side"></div>
</div>
</div>
A live version of the problem can be seen here. It is the 'Brands' dropdown in question that I am trying to remove the right hand border from the 3rd (last) column.
I'm aware of browser incompatibilities and other alternatives using JS / jQuery that exist perhaps but I'm only interested in trying to resolve this with the CSS.
I'm thinking perhaps this needs a fresh pair of eyes because I've tried tons of variations and not managed to select the last column within that drop down I believe.
Thanks in advance.
EDIT: I have attempted tons of variations but I think the issue is my inability to work out the last child of the parent item which doesn't count other divs too. I've been trying with the likes of:
div:last-child .col_1 {border-right: none !important;}
Thanks.
EDIT 2: Please find instance of my issue on JS Fiddle too if it helps anyone.
Thanks.

Answer 1

You are not using selectors right.
Here is a fix using nth-child:
http://jsfiddle.net/BUhgZ/3/