How to Center a Drop Down Navigation Bar? - css

Question

I'm having issues centering the Navigation bar of my Drop Down menu (See Code Below). To specify what I mean I'll leave an image here aswell.
As you can see the middle and bottom Navigation bars aren't centered, and when I attempt to center them, they stack on top of each other in the middle of the screen instead of just centering the line. All of the HTML for the Navigation bar is the same, so I've left the first section for it in the code. Any help is appreciated.
/*CSS*/
#menu {
z-index: 1;
clear: both;
margin: 0;
padding: 0 40px 0 0;
font: bold 15px/26px Avenir;
height: 2em;
}
#menu ul {
float: left;
list-style: none;
margin:0;
padding: 0;
}
#menu li {
display: inline;
list-style: none;
position: relative;
float: left;
}
#menu li a {
display: block;
float: left;
padding: 0 0.5em;
text-decoration: none;
color: #000;
}
#menu li.current_page_item a {
background-color: #FFF;
color: #333;
}
#menu li.current_page_item ul li a {
background-color: transparent;
color: #333;
width: 9em;
}
#menu li:hover {
background: #ECECEC;
}
#menu li a:hover {
color: #333;
}
#menu>ul a {
width: auto;
}
#menu ul ul {
position: absolute;
display: none;
}
#menu ul ul li {
border-bottom: 1px solid #CCC;
width: 9em;
}
#menu ul li:hover ul {
display:block;
background-color: #AAA;
width: 9em;
}
#menu ul ul li:hover ul {
display:block;
background-color: #555;
}
#menu ul ul {
top: 2em; left: 0em;
}
#menu ul ul ul {
top: 0em; left: 9em;
border-top: 0.1em solid #CCC;
}
/*HTML*/
<div id="menu">
<ul>
<li>Alternative & Natural Building <ul>
<li>Earthbag</li>
<li>Strawbale</li>
<li>Tiny Houses</li>
<li>Underground Houses</li>
<li>Yurts</li>
</ul></li>