CSS3 마지막 선택 드롭 다운 메뉴가 작동하지 않음

Question

현재 작업중인이 사용자 지정 드롭 다운 탐색 메뉴에서 작동하지 않는 CSS3 가상 요소 'last-child'를 해결하지 못했습니다.

각 드롭 다운 메뉴에 여러 개의 열을 지정할 수 있습니다.이 경우 div .dropdown_3column의 각 열 (.col_1)에 오른쪽 테두리를 적용하고 싶습니다.

CSS 코드 조각

.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 코드 단편은

<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> 

문제의 라이브 버전은 here를 볼 수 있습니다. 문제의 '브랜드'드롭 다운 메뉴에서 3 번째 (마지막) 열에서 오른쪽 테두리를 제거하려고합니다.

브라우저 비 호환성 및 JS/jQuery를 사용하는 다른 대안을 알고 있을지 모르지만 저는 CSS와 함께이를 해결하려고 노력하고 있습니다.

나는 다양한 변형을 시도 했으므로 드롭 다운 내에서 마지막 열을 선택하지 않아서 아마도 새로운 쌍의 눈이 필요하다고 생각합니다.

미리 감사드립니다.

EDIT : 나는 수많은 톤을 시도했지만, 문제는 다른 div도 포함하지 않는 상위 항목의 마지막 하위 항목을 해결할 수 없다고 생각합니다. 나는 같은 시도를 해왔다 :

div:last-child .col_1 {border-right: none !important;} 

고마워.

EDIT 2 : 누구에게 도움이된다면 JS Fiddle에도 내 호의 인스턴스를 찾으십시오.

감사합니다.

Answer 1

선택기를 제대로 사용하고 있지 않습니다. 다음은 nth-child를 사용하는 수정입니다. http://jsfiddle.net/BUhgZ/3/