Как выстроить выпадающее меню?

Question

Выпадающее меню не выравнивается правильно. Выпадающие варианты справа по какой-либо причине вместо выравнивания («ученики», «программы», «тренировки»). Вот CSS код меню:

<style type="text/css"> 
#drop-nav { 
width: 1000px; 
} 
ul { 
margin: 0px; 
padding: 0px; 
list-style-type: none; 
list-style-image: none; 
list-style-position: outside; 
overflow: visible; 
position: static; 
} 
ul li { 
border: 1px solid #000000; 
display: block; 
position: relative; 
float: left; 
right: -4px; 
background-color: white; 
} 
li ul { 
display: none; 
background-color: #3333ff; 
} 
ul li a { 
padding: 10px 18px 5px 90px; 
background: #3333ff none repeat scroll 0% 50%; 
text-decoration: none; 
white-space: nowrap; 
color: #ffffff; 
overflow: visible; 
text-align: center; 
display: block; 
} 
ul li a:hover { 
background: #3366ff none repeat scroll 0% 50%; 
overflow: visible; 
} 
li:hover ul { 
display: block; 
position: absolute; 
overflow: visible; 
} 
li:hover li { 
float: none; 
background-color: #3366ff; 
} 
li:hover a { 
background: #2346b1 none repeat scroll 0% 50%; 
} 
li:hover li a:hover { 
background: #40a3f6 none repeat scroll 0% 50%; 
} 
#drop-nav li ul li { 
border-top: 0px none; 
overflow: visible; 
visibility: visible; 
font-family: Arial,Helvetica,sans-serif; 
text-align: justify; 
clear: none; 
display: table-row; 
width: 140px; 
} 
</style> 

Вот HTML:

<ul id="drop-nav"> 
<li><a href="#">Home</a> 
</li> 
<li><a href="about.html">About</a> 
<ul> 
    <li><a href="students.html">Students</a></li> 
    <li><a href="programs.html">Programs</a></li> 
    <li><a href="trainings.html">Trainings</a></li> 
</ul> 
</li> 
<li><a href="services.html">Services Offered</a> 
</li> 
<li><a href="products.html">Our Products</a></li> 
<li><a href="#">Contact</a> 
</li> 
</ul> 

Answer 1

Это происходит потому, что НУ используется обивка налево на 90 пикселей. Вы можете изменить его к этому:

ul li ul li a { 
    text-align: left; 
    padding: 10px 18px 5px 0px; 
    width: 100%; 
    display: table-cell; 
} 

fiddle

Answer 2

Это не ясно, что вы имеете в виду, но текст зависят, как вы слишком много левых отступов на анкерные ссылки сравнивали другие стороны.

ul li a { 
    padding: 10px 18px 5px 90px; /* 90px!!! */ 

Попробуйте что-то менее

JSfiddle Demo