I am working on customizing a CSS dropdown menu for my website. My goal is to have the homepage aligned to the left side of the page instead of the center. Below is the style sheet and the div tags I am using for the dropdown navigation bar:
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>