最後一個孩子到第一個孩子

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

添加position: relative到#wrapper股利和改變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/