Can someone help me with centering this navigation menu and submenu horizontally? I've tried adjusting the width of the navigation list and setting margin to 0 auto, but it's not working for me. I also want to maintain the background color of the navigation bar throughout the entire width of the page.
Here is my HTML:
<div class="slide-down-page">
<ul id="nav">
<li id= "bio"><a class="active btn" href="home.html">Bio</a></li>
<li id= "portfolio"><a href="portfolio.html">Portfolio</a>
<ul>
<li><a href="#">Writing</a>
</li>
<li><a href="#">Illustrations</a></li>
<li><a href="#">Design</a></li>
</ul>
</li>
<li id= "contact"><a href="contact.html">Contact</a></li>
</ul>
</div>
This is my CSS:
#nav{
margin: 0 ; padding: 0;
position: fixed;
width: 100%;
background:#e7e7e7;
}
#nav li {
list-style: none;
display: inline-block;
float: left;
}
#nav li a{
padding: 1em 2em;
display: inline-block;
text-decoration: none;
color: #F2583E;
font-family: 'Helvetica Neue';
font-size:1.25em;
background: #e7e7e7;
text-align: center;
margin: 0 auto;
}
#nav li a:hover{
background-color: #C1DAD6;
}
#nav a.active, #nav li:hover a.active{
background-color: #F2583E;
color: #F7F3E8;
cursor: default;
}
/*SubMenu*/
#nav li ul{
display: none;
}
#nav li:hover ul{
display: block;
position: absolute;
top: 63px;
width: 100%
left:0px;
background: #C1DAD6;
color:white;
}
#nav li:hover ul li, #nav li:hover ul li a{
display: inline-block;
float: left;
padding: 5px;
color:white;
background: #C1DAD6;
}
#nav li ul li:hover a{
color: #77bed2;
}
#nav li ul li{
_display: inline-block; /* for IE5*/
}
#nav li ul li a{
width: 150px;
}