向下滑动菜单不以动画形式显示

Question

现在，我正在尝试将下拉的导航列表进行动画。我可以使它褪色，但绝对不会滑动。

这是下拉菜单的样本。

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

我尝试了高度的过渡，什么也没有发生。我不能使用两个过渡元素吗？因为如果我尝试一行以获取背景，而一条高度也不会发生。

如何使此导航列表动画？

Answer 1

您错过了> 之后：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/

欢呼和祝你好运！