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/

Answer 2

您只需在UL上添加固定宽度+背景颜色：

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

最后一个孩子到第一个孩子

2 个答案: