2

現在の CSS ドロップダウン メニューにトランジションを追加したいと考えています。

「トランジション: 高さイーズインアウト 500ms;」があります。コードはすべて準備ができているので、追加する場所を知る必要があります。

メニューの設定方法は次のとおりです。

<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

Start by deleting the display:none from to the accordion. Then specify a height to the accordion li elements as well as a transition type. in the :hover state of the About us li, you specify the new height for the accordion li's. DEMO

于 2012-11-20T07:43:48.927 に答える
0

メニューの高さが変わる (状態ではない) 同じルールにそのディレクティブを追加します:hover。

より詳細な回答が必要な場合は、詳細を提供する必要があります。

于 2012-11-19T23:16:41.990 に答える