html - 添加新过渡后导航栏显示异常

Question

所以我在 repo.itechy21.com 的导航栏中添加了动画当我想让它居中时，它使下拉文本推到下拉列表的右侧。它在下面附加的相关 CSS(连同 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 导航栏布局(减去链接):

<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>

关于如何解决这个问题并使对齐恢复到原来的状态有什么建议吗？

Answer 1

希望对您有所帮助。

/* 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*/