2

我希望在我当前的 CSS 下拉菜单中添加一个过渡。

我有我的“过渡：高度缓入 500 毫秒；” 代码都准备好了，我只需要知道在哪里添加它。

我的菜单设置是这样的：

<ul id="nav">

    <li>
        <a href="/about/index.html">About Us <img style="border:0;" src="/index_files/darrow.png" /></a>

        <ul id="accordion">

            <li><a href="/about/mission.html">Who We Are</a></li>
            <li><a href="/about/contactUs.php">Contact Us</a></li>
            <li><a href="/about/mission.html">Join Us For Worship</a></li>
            <li><a href="/about/staff.html">Meet Our Staff</a></li>

        </ul>


    </li>
</ul>

所以，我想知道我会将转换代码放在我的 .css 文件中以影响“手风琴”部分的位置。（我可以删除该id="accordion"部分，那只是在测试中。

感谢所有帮助，谢谢。

编辑：这是CSS：

#nav {

    font-size:20px;
    text-align:center;
    position:relative;
    z-index:500;
    display:block;
    margin-bottom:20px;
    padding:0;
    width:950px;
    background:#33A1DE;
    float:left;
    border-bottom:none;
    color:white;
    -moz-box-shadow: 0px 5px 10px #333333;
    -webkit-box-shadow: 0px 5px 10px #333333;
    box-shadow: 0px 5px 10px #333333;
}


#nav a:visited, #nav a {
    color:white;
}


#nav li a, #nav li {
    float:left;

}

#nav > li {
    line-height:2em;
    width:20%;
    list-style:none;
    position:relative;
    border-top:none;
    border-right:1px solid white;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#nav > li.right {
    line-height:2em;
    width:20%;
    list-style:none;
    position:relative;
    border-right:none;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

#nav li a {
    height:100%;
    width:100%;
    text-decoration:none;
    background:#33A1DE; 
}

#nav li a:hover {
    background:#000000;
}

/* Submenu */

#nav li ul {
    list-style:none;
    width:100%;
    display:none;
    position:absolute;
    left:0;
    top:100%;
    padding:0; margin:0;
}

#nav li ul:last-child {
    border-bottom:1px solid white;
}


#nav li:hover > ul {
    display:block;
}


#nav li ul li, #nav li ul li a {
    float:none;
}

#nav li ul > li {
    left:-1px;
    text-align:center;
    margin:auto;
    position:relative;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    _display:inline; /* for IE6... God knows why */
}

#nav li ul li a {
    display:block;
    border:1px solid white;
    border-bottom:none;
}


/* Sub-Submenu */

#nav li ul li > ul {
    list-style:none;
    display:none;
    position:absolute;
}

#nav li ul li:hover ul {
    border-left:1px solid white;
    z-index:5;
    left:0px;
    top:0px;
    left:100%;
    width:200px;
}

#nav li ul li ul:last-child {
    border-bottom:1px solid white;
}

#nav li ul li:hover ul.youth {
    border-left:1px solid white;
    z-index:5;
    left:0px;
    top:-100%;
    left:100%;
    width:200px;
    box-sizing:border-box;
}
4

2 回答 2

1

首先删除display:nonefrom 到手风琴。然后指定手风琴 li 元素的高度以及过渡类型。在 About us li 的 :hover 状态下，您指定手风琴 li 的新高度。 演示

于 2012-11-20T07:43:48.927 回答
0

:hover您在菜单高度更改（而不是状态）的相同规则上添加该指令。

如果您想要更详细的答案，您必须向我们提供更多详细信息。

于 2012-11-19T23:16:41.990 回答