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; 
}