jquery - 淡入下拉菜单

Question

我已经尝试了所有方法，但似乎无法让下拉菜单淡入。是否可以在使用 CSS 时淡入 .submenu？我不知道为什么它不能使用通常的“过渡”CSS。下面是http://jsfiddle.net/aAXwr/

<ul id="main-menu">

<li><a href="<txp:site_url />" style="background-image:none;">Home</a></li>

<li><a href="<txp:site_url />about">About</a>

<ul class="sub-menu">
<li><a href="<txp:site_url />">About&#160;Us</a></li>
<li><a href="<txp:site_url />">Our&#160;journey</a></li>
<li><a href="<txp:site_url />">Our&#160;partnerships</a></li>
<li><a href="<txp:site_url />">Our&#160;values</a></li>
</ul>
</li>

<li><a href="<txp:site_url />switching">Switching</a>

<ul class="sub-menu">
<txp:article_custom form="menu_listing" pgonly="0" section="switching" sort="Posted asc" />

</ul>

</li>

</ul>

这是我的 CSS

#main-menu {
    float: left;
    font-size: 0;
    margin: 15px 0;
}

#main-menu > li {
    display: inline-block;

}



#main-menu > li > a {
    color: #eee;
    font-size: 18px;
    line-height: 14px;


  background:url('http://plymouthenergycommunity.org.uk.s171938.gridserver.com/images/12.jpg') no-repeat top left;
    padding-left: 15px;
height:40px;
display:block;
padding-right:2px;

}

#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
    color: #ffb612;

}

#main-menu li {
    position: relative;
z-index:7000;


}





ul.sub-menu { 

        background:#fff;
        display:none;
        height:auto;
        color:#000;
        margin:0px;
        border:0px;
        position:absolute;
        width:150px;
        z-index:200;
        -moz-box-shadow:    2px 2px 5px 2px #000;
        -webkit-box-shadow: 2px 2px 5px 2px #000;
        box-shadow:         2px 2px 5px 2px #000;
        /*top:1em;
        /*left:0;*/


        }





ul.sub-menu ul.sub-menu { /* level 3+ */
    margin-top: -1px;
    padding-top: 0;
    left: 149px;
    top: 0px;
}

ul.sub-menu > li > a {


    color: #29225c;
    display: block;
    font-size: 16px;
    line-height: 16px;
padding-left:10px;

}

ul.sub-menu > li > a:hover { 
    color: #000;

}






ul.sub-menu > li:first-child {
padding-top:10px;
}

ul.sub-menu ul.sub-menu > li:first-child {


}

ul.sub-menu > li:last-child > a {
padding-bottom:10px;
}

ul.sub-menu > li > a.parent {
    background-image: url(../images/arrow.png);
    background-size: 5px 9px;
    background-repeat: no-repeat;
    background-position: 95% center;
}

#main-menu li:hover > ul.sub-menu {
    display: block; /* show the submenu */

}

Answer 1

你可以使用opacity代替display:

ul.sub-menu { 
    display:block;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

#main-menu li:hover > ul.sub-menu {
    opacity: 1;
}

Here's a Fiddle