마지막 자식에서 첫 번째 자식으로

Question

현재 자식 셀렉터를 사용하는 탐색 바에 대해 CSS를 변경하여 첫 번째 자식을 사용하여 패딩 간격을 줄이고 더 많은 크로스 브라우저를 준수하도록하고 싶습니다. 마지막 코드 대신 첫 번째 코드를 바꾸려면 코딩을 전환해야한다는 것을 알고 있지만 문제는 절대 위치 지정이 현재 현재 위치를 왼쪽으로 잡고 오른쪽으로 간격을 유지한다는 것입니다. 어떤 아이디어?

#navigation {font:1.6em Verdana,Geneva,sans-serif; position:absolute; top:103px;} 

#navigation ul {list-style:none;} 

#navigation span{ position:absolute; left:-15px; top:5px; width:15px; height:100%;  
background-color:#647484; background-image:url(images/navshadow.png); background- 
position:right top; background-repeat:repeat-y} 

ul.dropdown li{z-index:3; font-weight:normal; float:left; zoom:1; background:#647484; 
padding:12px 16px; position:relative;} 

ul.dropdown li:last-child{padding-right:20px;} 

Answer 1

가 #wrapper DIV에 position: relative를 추가하고 다음에 ul.dropdown 스타일을 변경 :

ul.dropdown { 
    font: 1.6em Verdana, Geneva, sans-serif; 
    position: absolute; 
    top: 77px;     /*this has changed*/ 
    list-style: none; 
    background-color: #647484; /*add this */ 
    left: 0;     /*add this */ 
    right: 0;     /*add this */ 
} 

을

더 깨끗한 코드의 경우 배경색을 자식에서 제거 할 수 있습니다.요소.

JSFiddle : http://jsfiddle.net/zyKDf/4/

Answer 2

당신은 단순히 당신의 UL에 고정 된 폭 + 배경색 넣을 수 :

http://jsfiddle.net/zyKDf/3/