CSS dropdown navigation

Question

У меня есть это раскрывающееся меню CSS. Я хочу, чтобы начальная страница начиналась с левой стороны страницы, а не по центру. Здесь есть таблица стилей и DIV теги для выпадающих панелей навигации:

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

Try:

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