CSS Übergang bootstrap navbar dropdown-menü

Question

ich möchte dropdown-menü so machen site menas erstes dropdown-menü sichtbar im margin-top 100px und mit übergang nach oben. Ich benutze unten Code aber nicht für mich arbeiten. Tut mir leid für mein schlechtes Englisch .

<nav class="navbar navbar-default transparent row" role="navigation"> 
         <!-- Brand and toggle get grouped for better mobile display --> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
           <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="collapse navbar-collapse navbar-ex1-collapse"> 
          <ul class="nav navbar-nav"> 
           <li><a href="">menu1</a></li> 
           <li class="divider-vertical"></li> 
           <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> menu2</a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">menu1</a></li> 
             <li><a href="#">menu2</a></li> 
             <li><a href="#">menu3</a></li> 
            </ul> 
           </li> 
          </ul> 

         </div><!-- /.navbar-collapse --> 
        </nav> 

.navbar-nav li .dropdown-menu{ 
    width: 160px; 
    border-top: 4px solid #90cc00; 
    border-radius: 0; 
    font-weight: bold; 
    transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    margin-top: 90px; 
} 

.navbar-nav li:hover .dropdown-menu{ 
    margin-top: 0px; 
} 

Answer 1

erwartete Ergebnis zu erzielen, unter Option

HTML:

<nav class="navbar navbar-default transparent row" role="navigation"> 
         <!-- Brand and toggle get grouped for better mobile display --> 
         <div class="navbar-header"> 
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
           <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="collapse navbar-collapse navbar-ex1-collapse"> 
          <ul class="nav navbar-nav"> 
           <li><a href="">menu1</a></li> 
           <li class="divider-vertical"></li> 
           <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown"> menu2</a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">menu1</a></li> 
             <li><a href="#">menu2</a></li> 
             <li><a href="#">menu3</a></li> 
            </ul> 
           </li> 
          </ul> 

         </div><!-- /.navbar-collapse --> 
        </nav> 

CSS:

.navbar-nav li .dropdown-menu{ 
    width: 160px; 

    margin-top: 90px; 
    visibility:hidden; 
} 

.navbar-nav li:hover .dropdown-menu{ 
    margin-top: 0px; 
    visibility:visible; 
     border-top: 4px solid #90cc00; 
    border-radius: 0; 
    font-weight: bold; 
    transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    } 

JS:. $ ('Drop-Down') addClass ('öffnen');

Codepen - http://codepen.io/nagasai/pen/XKYKgG