Navigation bar displaying weirdly after adding new transition

Question

So I added an animation to my navigation bar at repo.itechy21.com and its made the drop down text push to the right side of the drop down when I want it centred. The relevant CSS it attached below (along with HTML) CSS:

/* Start nav bar*/
#header {
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#content {
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: center
}
#menu, #menu nav {
    margin:0 auto;
    padding:0;
    position: center;
    text-align: center
}
#menu {
    display: inline-block;
    list-style:none;
    background-color: #98bf21;
    border-radius: 10px;
    text-align: center
}
#menu li {
    float: left;
    position: relative;
    list-style: none;
    text-align: center
}
#menu > li:hover > ul {
    display:block;
    background-color: #98bf21;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    visibility:visible;
    opacity:1;
    filter:alpha(opacity=100);
}
#menu > li > ul {
    /*animation control*/
    visibility: hidden;
    opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transition:.5s ease;
    -moz-transition:.5s ease;
    -o-transition:.5s ease;
    transition:.5s ease;
    position: relative;
}
#menu li a {
    display: inline-block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    /*animation control*/
    -o-transition:color .2s ease-out;
    -ms-transition:color .2s ease-out;
    -moz-transition:color .2s ease-out;
    -webkit-transition:color .2s ease-out;
}
#menu li a:hover {
    color: black;
    -o-transition:color .5s ease-in;
    -ms-transition:color .5s ease-in;
    -moz-transition:color .5s ease-in;
    -webkit-transition:color .5s ease-in;
}
/*End of nav bar css*/ 

HTML navbar layout (minus links):

<ul id="menu">
    <li><a href="">Home</a></li>
    <li><a href="#">Modules</a>
        <ul>
            <li><a href="#">Remove Retina</a></li>
            <li><a href="#">Device Information</a></li>
            <li><a href="#">Syslogd Fixer</a></li>
        </ul>
    </li>
    <li><a href="#">Toolkit</a></li>
    <li><a href="#">Donate</a></li>
    <li><a href="#">Blog</a></li>
</ul>

Any suggestions on how to fix this and get the align back to what it used to be?

Answer 1

I hope this will help.

/* Start nav bar*/
#header {
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#content {
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: center
}
#menu, #menu nav {
    margin:0 auto;
    padding:0;
    position: center;
    text-align: center
}
#menu {
    display: inline-block;
    list-style:none;
    height: auto;
    width: auto;
    background-color: #98bf21;
    border-radius: 10px;
    text-align: center;
    -webkit-transition:.5s ease;
    -moz-transition:.5s ease;
    -o-transition:.5s ease;
    transition:.5s ease;
}
#menu > li {
    float: left;
    position: relative;
    display: inline-block;
    width: 120px;
    list-style: none;
    text-align: center;
}
#menu ul > li {
    display: block;
    width: 100%;
    list-style: none;
    text-align: center;
}
#menu > li:hover > ul {
    display:block;
    background-color: #98bf21;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    visibility:visible;
    opacity:1;
    filter:alpha(opacity=100);
}
#menu > li > ul {
    /*animation control*/
    display:none;
    width: 120px;
    height: auto;
    margin: 10px 0 0 0;
    opacity: 0;
    z-index: 10;
    filter:alpha(opacity=0);
    -webkit-transition:.5s ease;
    -moz-transition:.5s ease;
    -o-transition:.5s ease;
    transition:.5s ease;
}
#menu li a {
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    /*animation control*/
    -o-transition:color .2s ease-out;
    -ms-transition:color .2s ease-out;
    -moz-transition:color .2s ease-out;
    -webkit-transition:color .2s ease-out;
}
#menu li a:hover {
    color: black;
    -o-transition:color .5s ease-in;
    -ms-transition:color .5s ease-in;
    -moz-transition:color .5s ease-in;
    -webkit-transition:color .5s ease-in;
}
/*End of nav bar css*/