我想在我的网站上尝试下拉过渡效果。我试过给
transition: all 2s ease-in-out
但它没有给出结果。我想在移动视图中悬停时显示下拉列表，并带有一些过渡效果。我目前正在使用一些类引导程序。 这是我的HTML
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header pull-left">
<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> -->
<a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch">
<img src="bild/Schweizerisch-Japanische-Gesellschaft.png" class="img-responsive showabove"></a>
<a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch">
<img src="bild/logomiddle.png" class="img-responsive showinbetween"></a>
<a class="navbar-brand" href="#" rel="home" title="Swiss-Japanese Society – www.swiss-japan.ch">
<img src="bild/logosmall.png" class="showless"></a>
</div>
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- <li class="navbar-text pull-left">User Name</li> -->
<li class="dropdown pull-right">
<div id="lang_sel"><ul><li><a href="#" class="lang_sel_sel icl-de">DE</a> <ul><li class="icl-en"><a href="#">EN</a></li></ul></li></ul><span class="sj-down-arrow">▾</span></div> </li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse navbar-right collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 21px;">
<ul id="menu-menu-1" class="nav navbar-nav"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-12 current_page_item menu-item-20"><a href="#">Startseite</a></li>
<li id="menu-item-580" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-580"><a href="#">Uber Uns</a>
<ul class="sub-menu">
<li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-175"><a href="#">Ziel und Zweck</a>
<ul class="sub-menu">
<li id="menu-item-226" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-226"><a href="#">testing</a></li>
</ul>
</li>
<li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="#">Leitbild</a></li>
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="#">Entstehungsgeschichte</a></li>
<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-219"><a href="#">Vorstand</a></li>
<li id="menu-item-218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218"><a href="#">Aktueller Jahresbericht</a></li>
<li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217"><a href="#">Archiv Jahresberichte</a></li>
</ul>
</li>
<li id="menu-item-581" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-581"><a href="#">Veranstaltungen</a>
<ul class="sub-menu">
<li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248"><a href="#">Jubiläum 2014</a></li>
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href=#">Aktuelle Veranstaltungen</a></li>
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="#">Vergangene Veranstaltungen</a></li>
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a href="#">Fotogalerie</a></li>
</ul>
</li>
<li id="menu-item-582" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-582"><a href="#">Mitgliedschaft</a>
<ul class="sub-menu">
<li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232"><a href="#">Aufnahme-Bedingungen</a></li>
<li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233"><a href="#">Beitrittsgesuch</a></li>
</ul>
</li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="#">Varia</a></li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href="#">Links</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href=#">Kontakt</a></li>
</ul>
</div>
</div>
</div>
是名为sub-menu的下拉类的css：
@media (max-width: 900px)
.navbar-nav ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
box-shadow: none;
display: none;
}
@media (max-width: 900px)
.navbar-nav {
margin: 0;
padding: 0;
position: fixed;
left: 0; width: 100%;
z-index: 10;
background: #f8f6f6;
overflow: visible;
}
@media (max-width: 900px)
.navbar-nav li {
background: #fff;
position: static;
display: block;
float: none;
border: 0;
margin: 0;
border-bottom: 1px solid #fff;
border-top: 1px solid #999;
}
答案 0 :(得分：0)
这是因为bootstrap默认情况下为您提供display:none下拉列表，并且在悬停时它为display:block但是根据css规则transition属性不适用于show hide条件。< / p>
您必须创建自己的下拉列表以及其他一些效果，或者您可以使用插件。