Navigation bar displaying weirdly after adding new transition - html

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>Home</li>
<li>Modules
<ul>
<li>Remove Retina</li>
<li>Device Information</li>
<li>Syslogd Fixer</li>
</ul>
</li>
<li>Toolkit</li>
<li>Donate</li>
<li>Blog</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*/