CSS 下拉导航

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

尝试：

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