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

添加新过渡后，导航栏显示奇怪

1 个答案: