css - 最后一个 child 到第一个 child

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 div 并将 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 */
}

为了使代码更简洁，您现在可能希望从子 li 元素中移除背景色。

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