向下滑动菜单没有动画

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/

干杯，祝你的项目好运！