jquery - 需要在我的下拉菜单上使用 jquery 或 css3 产生一些效果

Question

这是我的下拉菜单，我需要添加一些效果，比如使用 jquery 或 css3 平滑地切换或向下滑动，非常感谢 :D。我知道一些影响，但需要专业人士的解决方案。

CSS:

#menu ul.Mainmenu {
    width: 996px;
    margin: 0px;
    padding: 0px;
    margin-top: 10px;
}
#menu ul.Mainmenu li {
    float: left;
    list-style: none;
    margin-right: 20px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #860300;
    margin-right: 16px\9;  /* IE8 and below */
    position:relative;
    height:30px;
}

#menu ul.Mainmenu li a {

    text-decoration:none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #860300;

}
ul li ul {
    padding: 0;
    position: absolute;
    top: 25px;
    left: 0;
    width: 150px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transiton: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -transition: opacity 0.2s;
    z-index:100000;
    width:150px;
    background-color:red;
    padding:7px;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius:3px;
}
ul li ul li { 

    display: block; 
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

/************************   The Slide Show **************************/

#slideShow {
    height: 500px;
    width: 100%;
    position: relative;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url(../1.jpg);


}
#slideShow #UpEdge {
    position: absolute;
    width: 100%;
    height: 15px;
    background-image: url(../img/Up-Edge.png);
    background-repeat: repeat;
    top: 0px;
    z-index:100;
}
#slideShow #BottomEdge {
    position: absolute;
    width: 100%;
    height: 15px;
    background-image: url(../img/bottom-Edge.png);
    background-repeat: repeat;
    bottom: 0px;
    background-position: bottom;
    z-index:100;
}

HTML:

<ul class="Mainmenu">
    <li><a href="#">Services</a></li>
    <li><a href="#">Hospital Facilities</a>
        <ul>
            <li>
                <a href="#">Sub Menu 1111</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>

Answer 1

如果您一直在 display: none 和 display: block 之间切换，transition 将不起作用。您可以在此处找到更新版本的代码:http://jsfiddle.net/myTerminal/2URGf/

我做了什么:

1. 删除了 display: none 和 display: block
2. 将转换时间从 0.2 秒增加到 1 秒
3. 重新调整您的 CSS
4. 创建了一个 fiddle

希望对您有所帮助。