html - CSS dropdown navigation -


i have css dropdown menu. want homepage start on left side of page, not on center. herein style sheet , div tags dropdown navigation bar:

ul, li, html,  {    margin:0; padding: 0;    }    body  {    text-align: center;     margin: 0 auto;    padding: 0;    font: 65% arial, sans-serif;  }    li  {    list-style-type: none;  }     {    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  {    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  {    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>

try:

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

Comments

Popular posts from this blog

android - Spacing between the stars of a rating bar? -

aspxgridview - Devexpress grid - header filter does not work if column is initially hidden -

c# - How to execute a particular part of code asynchronously in a class -