Question

I want to change my css for a nav bar that currently uses the last-child selector to using the first-child to cover up a padding gap and therefore make it more cross-browser compliant. I know I should switch the coding around to change the first one instead of the last one but the problem is that the absolute positioning currently holds the position to the left, leaving the gap to the right. Any ideas?

#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

Add position: relative to the #wrapper div and change the ul.dropdown style to the following:

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 */
}

For a cleaner code, you may now want to remove the background colours from the child li elements.

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