CSS transition bootstrap導航欄下拉菜單

Question

我想讓這樣的下拉菜單site menas第一個下拉菜單可以在margin-top 100px中看到，並且過渡到頂部。我使用下面的代碼，但不適合我。對不起我的英文不好。

<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

爲了達到預期的效果，請使用以下選項

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： $（ '下拉菜單'）addClass（ '打開'）;

Codepen -​​