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/

我做了什么：

已移除display: none和display: block
将过渡时间从0.2秒增加到1秒
重新调整您的CSS
创造了一个小提琴

我希望它会有所帮助。

Answer 2

你可以使用Select2 JQuery插件来获得时尚的DropDown，供参考点击此链接：

Select2 (github.io)

您可以在此DropDown中使用搜索和删除选择等功能。

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

2 个答案: