от последнего до первого ребенка

Question

Я хочу изменить свой CSS для навигационной панели, которая в настоящее время использует селектор last-child, чтобы использовать first-child, чтобы скрыть пробел заполнения и, следовательно, сделать его более совместимым с браузерами.Я знаю, что должен поменять кодировку, чтобы изменить первый вместо последнего, но проблема в том, что абсолютное позиционирование в настоящее время удерживает позицию слева, оставляя зазор справа.Есть идеи?

#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/