-2

現在、ドロップダウンナビゲーションリストをアニメーション化しようとしています。私はそれをフェードさせることができますが、絶対に滑ることはありません.

ドロップダウンのサンプルを次に示します。

<div id="nav" class="navv">
<ul>
    <li><a href="http://www.domain.com">Home</a></li>
    <li><a href="#">Archives</a>
        <ul>
            <li><a href="http://domain.com/index.php?f=BackIssues&page=_Directory2012">Back Issues 2012</a></li>
            <li><a href="http://domain.com/index.php?f=BackIssues&page=_Directory2011">Back Issues 2011</a></li>
            <li><a href="http://domain.com/index.php?f=musicianfeatures&page=_MusicianFeatureDirectory">Musician Features</a>
            </li>
            <li><a href="http://domain.com/index.php?f=cdreview&page=_cdReviewDirectory">CD Reviews</a></li>
            <li><a href="http://domain.com/index.php?f=artist&page=_ArtistFeatureDirectory">Visual Artist Features</a>
            </li>
            <li><a href="#">Coming Soon: Restaurant Reviews</a></li>
        </ul>
    </li>
    <li><a href="#">Calendars</a>
        <ul>
        <!--<li><a href="http://domain.com/index.php?f=calendar&page=TRF">TRF 44</a><li>-->
            <li><a href="http://domain.com/index.php?f=calendar&page=Music">Music &amp; Comedy</a></li>
            <li><a href="http://domain.com/index.php?f=calendar&page=OTR">On the Road Concert Calendar</a></li>
            <li><a href="http://domain.com/index.php?f=calendar&page=RoadTripz">Road Tripz</a></li>
            <li><a href="http://domain.com/index.php?f=calendar&page=Karaoke">Karaoke &amp; DJs</a></li>
            <li><a href="http://domain.com/index.php?f=calendar&page=Movies">Movie Times</a></li>
            <li><a href="http://domain.com/index.php?f=calendar&page=ToDo">Things to Do (Events)</a></li>
            <li><a href="http://domain.com/index.php?f=calendar&page=Stage">Stage &amp; Dance</a></li>
            <li><a href="http://domain.com/index.php?f=calendar&page=Art">Art &amp; Artifacts</a></li>
            <li><a href="http://domain.com/index.php?f=calendar&page=Subcal">Submit Calendar Item</a></li>
        <!--<li><a href="http://domain.com/index.php?f=calendar&page=domain">domain</a></li>
        <li><a href="../Feedback/Subcal.html">Submit Calendar Item</a></li>-->
        </ul>
    </li>

そしてここのCSS：

    #navcon {
background:#7E2217;
width:979px;
border:2px solid #ffe680;
}

#nav {
width:983px;
height:44px;
position:relative;
z-index:200;
color:#ffe680;
font-family:Arial, Tahoma, san-serif;
font-size:1em;
margin:0 auto;
}

#nav ul {
list-style-type:none;
}

#nav ul li {
float:left;
position:relative;
z-index:200;
width:163px;
}

#nav ul li a {
border:1px solid #ffe680;
display:block;
text-align:left;
text-decoration:none;
color:#ffe680;
z-index:200;
-webkit-transition:background .09s ease-in;
-o-transition:background .09s ease-in;
-moz-transition:background .09s ease-in;
padding:12px;
}

#nav ul li a:hover {
background:#E8A317;
color:#ffe680;
}

#nav ul li ul {
height:0;
overflow:hidden;
}

#nav ul li:hover ul {
height:auto;
overflow:shown;
position:absolute;
-webkit-transition:height 2s;
-o-transition:height 2s;
-moz-transition:height 2s;
}

#nav ul li:hover ul li a {
background:#fff;
color:#e8a317;
display:block;
}

#nav ul li:hover ul li a:hover {
background:#e8a317;
color:red;
}

高さだけでトランジションを試みましたが、何も起こりません。遷移要素を 2 つ使用できませんか? 背景に1行、高さに1行試しても何も起こらないからです。

このナビゲーション リストをアニメーション化するにはどうすればよいですか?

4

1 に答える 1

0

あなたは声明の>後に逃します...:hover

これを試して：

/* set the hidden menu */
#nav ul li ul{top:-100px;position:absolute;opacity:0}
/* do the magic */
#nav ul li:hover > ul{top:44px;opacity:1}

作業例: http://jsfiddle.net/Dvveq/

あなたのプロジェクトに乾杯と幸運を！

于 2012-10-24T21:27:36.753 に答える