CSS - центрирование li под предыдущим li

Question

Я пытаюсь центрировать li под предыдущим li для выпадающего меню.Лучшее, что я могу придумать, - это использовать отрицательное поле для перемещения списка влево, но это не работает единообразно.Есть идеи?

http://empact.mcallinder.com/empact.php

#navigation {
    height: 50px;
    width: 960;
}
#navigation ul li {
    display: block;
    float: left;
    padding: 0 40px;
}
#navigation ul li ul {
    display:none;
    width: 240px;
}
#navigation li:hover ul {
    display:block;
    position: absolute;
    margin: 0 0 0 -35px;
    padding: 0;
}

Answer 1

В вашем случае вам необходимо добавить position:relative для #navigation ul li, а затем расположить #navigation li:hover ul с помощью

left: 50%;
margin-left: -52px;

Сделав это, вы сначала поместите ul на половину родительского элемента li, а затем переместите его влево в соответствии с его размерами.

Answer 2

Попробуйте эту кодировку:

#navigation ul li {
    border: 1px solid black;
    display: block;
    float: left;
    padding: 0 30px;
    width: 80px;
}