Center Align Navigation Bar

Question

I'm having a hard time centering the navigation bar I've created.

HTML Code:

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Mr. A</a></li>
<li><a href="#">Intro</a>
    <ul>
        <li><a href="#">Daily Agenda</a></li>
        <li><a href="#">Handouts</a></li>
        <li><a href="#">Student Work</a></li>
    </ul>
</li>
<li><a href="#">Digital Design</a>
    <ul>
        <li><a href="#">Daily Agenda</a></li>
        <li><a href="#">Handouts</a></li>
        <li><a href="#">Student Work</a></li>
    </ul>
</li>
<li><a href="#">Web Design</a>
    <ul>
        <li><a href="#">Daily Agenda</a></li>
        <li><a href="#">Handouts</a></li>
        <li><a href="#">Student Work</a></li>
    </ul>
</li>
<li><a href="#">AP Computer Science</a>
    <ul>
        <li><a href="#">Daily Agenda</a></li>
        <li><a href="#">Handouts</a></li>
    </ul>
</li>
<li><a href="#">FBLA</a>
    <ul>
        <li><a href="#">Membership</a></li>
        <li><a href="#">Competitions</a></li>
        <li><a href="#">Conferences</a></li>

    </ul>
</li>
</ul>
</div> 


</body>

CSS Code:

html {
    background-color:#2f2f4f;
}
div {
    position:relative;
}

.menu {
    position:absolute;
}

.menu ul {
    padding:0;
    margin:0;
    line-height:30px;
}

.menu li {
    position:relative;
    float:left;
    list-style:none;
    border-bottom-style:solid;
    border-top-style:solid;
    border-color:#c5b358;
    border-width:1px;
}

.menu ul ul {
    position:absolute;
    visibility:hidden;
    padding:0;
    margin:0;
}

.menu ul li a {
    text-align:center;
    font:"Georgia", serif;
    font-size:18px;
    color:#c5b358;
    width:250px;
    height:50px;
    display:table-cell;
    text-decoration:none;
    vertical-align:middle;
}

.menu ul li:hover {
    background-color:#2f4f2f;
    text-decoration:none;
}

.menu ul li:hover ul {
    visibility:visible;
    z-index:1;
}

.menu ul li:hover ul li a {
    background:#2f4f2f;
    z-index:1;
    border-bottom:none;
    opacity:0.9;
    text-decoration:none;
}

.menu ul li ul li:hover {
    background:#2f4f2f;
    opacity:0.8;
    text-decoration:underline;
}

Nothing I do seems to work. I've tried several different options and can't find a solution. I'm fairly new to web design and it took me a while to get to this point.

Answer 1

I am expecting that I understood your question correctly. and on that basis I have modified your css code to get the desired result. please check the fiddle: https://jsfiddle.net/nileshmahaja/0k76hxc1/

Modified CSS

.menu ul {
    text-align:center;  /* Added */
}

.menu li {
    /*float:left;   Removed */
    display:inline-block; /* Added */
}