CSS menu déroulant navigation

Question

J'ai ce menu déroulant CSS. Je veux que la page d'accueil commence sur le côté gauche de la page, pas sur le centre. est présente la feuille de style et les balises div pour la barre de navigation déroulante:

ul, li, html, a 
 
{ 
 
    margin:0; padding: 0; 
 

 
} 
 

 
body 
 
{ 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
    font: 65% arial, sans-serif; 
 
} 
 

 
li 
 
{ 
 
    list-style-type: none; 
 
} 
 

 
a 
 
{ 
 
    text-decoration: none; 
 
    color: #034af3; 
 
} 
 

 
ul#nav 
 
{ 
 
    width: 22.5em; 
 
    height:2.5em; 
 
    margin: 2em auto 0; 
 
    font-size: 1.5em; 
 
} 
 

 
ul#nav li 
 
{ 
 
    position: relative; 
 
    float: left; 
 
    width: 5em; 
 
    height: 2em; 
 
    line-height: 2em; 
 
    background-color: #465c71; 
 
    display: block; 
 
    padding: 4px 0px; 
 
    border-right: 1px #4e667d solid; 
 
    color: #dde4ec; 
 
} 
 

 
ul#nav li.noBorder 
 
{ 
 
    border-right: none; 
 
} 
 

 
ul#nav li:hover 
 
{ 
 
    background-color: silver; 
 
} 
 

 
ul#nav li a 
 
{ 
 
    display: block; 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
ul#nav li ul 
 
{ 
 
    display: none; 
 
} 
 

 
ul#nav li:hover ul 
 
{ 
 
    display: inline; 
 
    float: left; 
 
    width: 10em; 
 
    height: auto; 
 
    margin: 0; padding: 0.27em; 
 
    font-size: 1em; 
 
    text-align: left; 
 
} 
 

 
ul#nav li:hover ul li 
 
{ 
 
    width: 100%; 
 
    height: 2em; 
 
    background-color: Yellow; 
 
    border: none; 
 
    border-bottom: 1px solid silver; 
 
    overflow: hidden; 
 
} 
 

 
ul#nav li:hover ul li a 
 
{ 
 
    display: block; 
 
    margin: 0; padding: 0 0 0 .3em; 
 
    height: 100%; 
 
    line-height:2em; 
 
    color: #465c71; 
 
} 
 

 
ul#nav li:hover ul li a:hover 
 
{ 
 
    background-color: white; 
 
}

<div style="background:#3a4f63;"> 
 
    <ul id="nav"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Abour</a> 
 
     <ul> 
 
     <li><a href="#">About 1</a></li> 
 
     <li><a href="#">About 2</a></li> 
 
     <li><a href="#">About 3</a></li> 
 
     <li class="noBorder"><a href="#">About 4</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Blog</a> 
 
     <ul> 
 
     <li><a href="#">About 1</a></li> 
 
     <li><a href="#">About 2</a></li> 
 
     <li><a href="#">About 3</a></li> 
 
     <li class="noBorder"><a href="#">About 4</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="noBorder"><a href="#">Contact</a></li> 
 
    </ul> 
 
</div>

Answer 1

Essayez:

body { text-align: left; } 
ul#nav { margin: 2em 0 0; }