Выравнивание по правому краю ссылки меню по горизонтали меню CSS

Question

у меня есть этот CSS и HTML для горизонтального меню:

.nav > li:hover { 
    background: #666666; 
    text-decoration:none; 
} 
.active { 
    background: #666666; 
    text-decoration:none; 
} 
nav, ul, li, a { 
    margin: 0; 
    padding: 0; 
} 
a { 
    text-decoration: none; 
} 
.container { 
    width: 100%; 
    margin: 10px auto; 
} 
.toggleMenu { 
    display: none; 
    background: #666666; 
    padding: 10px 15px; 
    color: #ffffff; 
    width:100%; 
    text-align:center; 
} 
.nav { 
    list-style: none; 
    *zoom: 1; 
    background:#f36f25; 
    text-align: center; 
} 
.nav:before,.nav:after { 
    content: " "; 
    display: table; 
} 
.nav:after { 
    clear: both; 
} 
.nav ul { 
    list-style: none; 
    width: 12em; 
} 
.nav a { 
    padding: 10px 15px; 
    color:#fff; 
} 
.nav li { 
    position: relative; 
    text-align: left; 
} 
.nav > li { 
    display: inline-block; 
} 
.nav > li > .parent { 
    background-image: url("/images/downArrow.png"); 
    background-repeat: no-repeat; 
    background-position: right; 
} 
.nav > li > a { 
    display: block; 
} 
.nav li ul { 
    position: absolute; 
    left: -9999px; 
} 
.nav > li.hover > ul { 
    left: 0; 
} 
.nav li li.hover ul { 
    left: 100%; 
    top: 0; 
} 
.nav li li a { 
    display: block; 
    background: #666666; 
    position: relative; 
    z-index:100; 
    border-top: 1px solid #ffffff; 
} 
.nav li li li a { 
    background:#f36f25; 
    color:#ffffff; 
    z-index:200; 
    border-top: 1px solid #ffffff; 
} 

@media screen and (max-width: 760px) { 
    .active { 
     display: block; 
    } 
    .nav { 
     border-top: none; 
    } 
    .nav > li { 
     display: block; 
     border-top: 1px solid #ffffff; 
    } 
    .nav > li > .parent { 
     background-position: 95% 50%; 
    } 
    .nav li li .parent { 
     background-image: url("/images/downArrow.png"); 
     background-repeat: no-repeat; 
     background-position: 95% 50%; 
    } 
    .nav ul { 
     display: block; 
     width: 100%; 
    } 
    .nav > li.hover > ul , .nav li li.hover ul { 
     position: static; 
    } 
} 

<a class="toggleMenu" href="#">Menu</a> 
<ul class="nav"> 
<li><a href=""><span>Homepage</span></a></li> 
<li><a href=""><span>About Us</span></a> 
    <ul> 
     <li><a href=""><span>Who Are We?</span></a></li> 
     <li><a href=""><span>Service Status</span></a></li> 
     <li><a href=""><span>Contact Us</span></a></li> 
     <li><a href=""><span>Terms & Conditions</span></a></li> 
    </ul> 
</li> 
</ul> 

, как я могу сделать основные ссылки меню по правому краю, а не центр?

здесь скрипку: http://jsfiddle.net/B5jtm/

Answer 1

Попробуйте это:

.nav {text-align: right;} 

Answer 2

Изменение:

text-align: center; 

к:

text-align: right; 

в:

.nav { 
    list-style: none; 
    *zoom: 1; 
    background:#f36f25; 
    text-align: right; 
} 

jsFiddle example

Answer 3

Я удалил текст выравнивать на .togglemenu и изменил .nav для выравнивания текста: право

Смотрите обновленный jsFiddle: http://jsfiddle.net/B5jtm/10/