to give transition effect to dropdown while in mobile view - html

Question

I want to try dropdown transition effect in my website. I have tried giving
transition: all 2s ease-in-out
but it does not give result. I want to show dropdown while in hover in mobile view with some transition effect. I am currently using some of the class of bootstrap.
Here's my 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>DE <ul><li class="icl-en">EN</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">Startseite</li>
<li id="menu-item-580" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-580">Uber Uns
<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">Ziel und Zweck
<ul class="sub-menu">
<li id="menu-item-226" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-226">testing</li>
</ul>
</li>
<li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183">Leitbild</li>
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204">Entstehungsgeschichte</li>
<li id="menu-item-219" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-219">Vorstand</li>
<li id="menu-item-218" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-218">Aktueller Jahresbericht</li>
<li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217">Archiv Jahresberichte</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">Veranstaltungen
<ul class="sub-menu">
<li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-248">Jubiläum 2014</li>
<li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245">Aktuelle Veranstaltungen</li>
<li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247">Vergangene Veranstaltungen</li>
<li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246">Fotogalerie</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">Mitgliedschaft
<ul class="sub-menu">
<li id="menu-item-232" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-232">Aufnahme-Bedingungen</li>
<li id="menu-item-233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-233">Beitrittsgesuch</li>
</ul>
</li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">Varia</li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">Links</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">Kontakt</li>
</ul>
</div>
</div>
</div>
sorry for my language. Can someone tell me in which class should i need to give transition so that to make the dropdown while in hover or while in clicked action.
below is css for dropdown class called sub-menu:
#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;
}

Answer 1

This is because bootstrap gives you dropdown which is display:none by default and on hover it is display:block but according to css rule transition property doesn't works on show hide condition.
You have to create your own dropdown with some other effect or you can use a plugin.