如何使下拉导航栏居中？

Question

我在下拉菜单的导航栏中出现问题（请参阅下面的代码）。要明确我的意思，我会留下一张图片here。

正如您所看到的那样，中间和底部导航条不居中，当我尝试将它们居中时，它们在屏幕中间堆叠在一起，而不是仅仅居中。导航栏的所有HTML都是相同的，所以我在代码中留下了第一部分。任何帮助表示赞赏。

    /*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><a href="alternative & natural building.html">Alternative & Natural Building </a><ul>
    <li><a href="earthbag.html">Earthbag</a></li>
    <li><a href="strawbale.html">Strawbale</a></li>
    <li><a href="tiny houses.html">Tiny Houses</a></li>
    <li><a href="underground houses.html">Underground Houses</a></li>
    <li><a href="yurts.html">Yurts</a></li>
    </ul></li>