WordPress的下拉菜單

Question

我已經在wordpress中創建了一個下拉菜單，其中當導航項目被懸停在子菜單上時顯示。不過，我覺得子菜單顯得太快，所以我想添加一個幻燈片動畫，這樣子菜單就會減損和縮回，使其外觀更加漸變。下面我試過的代碼，我覺得它應該工作，但顯然我失去了一些東西。

HTML

<div class="navbar-container container"> 

    <div class=""> 

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <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="https://son.sites.unc.edu/">School of Nursing</a> 

    </div> 

    <div class="row"> 
     <nav class="collapse navbar-collapse" role="navigation"> 
      <ul id="menu-top-menu" class="nav navbar-nav hover"><li class="active menu-home"><a href="https://son.sites.unc.edu/">HOME</a></li> 
       <li class="dropdown menu-about"><a class="dropdown-toggle disabled" data-target="#" href="#">ABOUT<b class="fa caret-dropdown"></b></a> 
       <ul class="dropdown-menu"> 
       <li class="menu-welcome"><a href="https://son.sites.unc.edu/about-2/welcome-from-the-dean/">Welcome</a></li> 
       <li class="menu-contact"><a href="https://son.sites.unc.edu/ahec-speakers-programs-catalog/contact/">Contact</a></li> 
       <li class="menu-mission-and-philosophy"><a href="https://son.sites.unc.edu/about/philosophy-of-nursing-and-nursing-education/">Mission and Philosophy</a></li> 
       <li class="menu-quick-facts"><a href="https://son.sites.unc.edu/about/quick-facts/">Quick Facts</a></li> 
       <li class="menu-milestones"><a href="https://son.sites.unc.edu/about-2/milestones/">Milestones</a></li> 
       <li class="menu-accreditation"><a href="https://son.sites.unc.edu/about/accreditation/">Accreditation</a> </li> 
       <li class="menu-diversity-facts"><a href="https://son.sites.unc.edu/about-2/diversity-facts/">Diversity Facts</a></li> 
       <li class="menu-news-and-events"><a href="https://son.sites.unc.edu/gerontology-aging/news-and-events/">News and Events</a></li> 
       <img class="menuAbout" src="http://son.sites.unc.edu/files/2015/12/outreach.jpg"></ul> 
      </li> 
      </ul>    
     </nav> 
    </div> 

</div> 

JAVASCRIPT

function mainmenu(){ 
$('#menu-top-menu li').hover(function(){ 
    $(this).find('ul:first').slideDown("slow"); 
},function(){ 
    $(this).find('ul:first').slideUp("slow"); 
    }); 
} 
$(document).ready(function(){ 
mainmenu(); 
}); 

這裏是CSS

.dropdown-menu li a:hover{ 
background-color: #fff; 
color: #7BAFD4; 
} 

.form-control-nav{ 
display: block; 
width: 100%; 
height: 42px; 
padding: 6px 12px; 
font-size: 14px; 
line-height: 2; 
color: #555; 
background-color: #fff; 
background-image: none; 
border: 0px solid #ccc; 
border-radius: 3px; 
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); 
/* box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); */ 
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
} 
.btn{padding:0px !important;} 

.btn-search{ 
background-image: none; 
background-color: #fff; 
background-repeat: repeat-x; 
border: none; 
border-radius: 3px; 
color: #003150; 
text-shadow: none; 
font-family: "Open Sans",sans-serif; 
padding: none; 
} 

.search-submit{ 
    z-index: 30; 
} 
#search-form input, 
#search-form input:hover{ 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

#search-form input:hover{ 
    width: 200px; 
} 

#search-form input{ 
    width: 30px; 
} 

#menu-search{ 
    display: inline-table !important; 
} 

.breadcrumbs .current, .breadcrumbs{ 
    display: none; 
} 
.navbar-nav>li>.dropdown-menu{ 
    margin-top: -30px; 
} 
.menuImage{ 
    position:relative; 
    z-index: 300; 
} 

.menuAbout{ 
    z-index:301; 
    max-width:40%; 
    height: auto; 
    padding-bottom: 10px; 
} 

.menuAcademics{ 
z-index:301; 
max-width:40%; 
height: auto; 
padding-bottom: 10px; 
} 

.menuFaculty{ 
z-index:301; 
max-width:40%; 
height: auto; 
padding-bottom: 10px; 
} 

.menuExcellence{ 
z-index:301; 
max-width:40%; 
height: auto; 
padding-bottom: 10px; 
} 

.menuOutreach{ 
z-index:301; 
max-width:40%; 
height: auto; 
padding-bottom: 10px; 
} 

.dropdown-menu{ 
box-shadow: none; 
background-color: #fff; 
z-index: 8; 
} 

.dropdown-menu li{ 
margin-top:30px; 
margin-left: 30px; 
} 

#menu-top-menu li a b{ 
display: none; 
} 

#menu-top-menu { 
margin: 0 auto; 
list-style: none; 
position: relative; 
width: 100%; 
text-align: center; 
} 
#menu-top-menu li { 
display: inline-block; 
} 

#menu-top-menu li ul li{ 
display: block; 
} 

#menu-top-menu li ul{ 
width: 100%; 
} 
#menu-top-menu a { 
color: #003150; 
font-family: 'Lato', sans-serif; 
font-weight: 300; 
letter-spacing: 0.04em; 
font-size: 14px; 
float: left; 
padding: 6px 10px 4px 10px; 
text-decoration: none; 
text-transform: uppercase; 
z-index:9; 
} 
#menu-top-menu a:hover { 
color: #7BAFD4; 
} 
#magic-line { 
position: absolute !important; 
bottom: -2px; 
left: 0; 
width: 100px; 
height: 2px; 
background: #7BAFD4; 
z-index: 15; 
} 
.active a { 
color: #7BAFD4 !important; 
} 

.ie6 #menu-top-menu li, .ie7 #menu-top-menu li { 
    display: inline; 
    } 
.ie6 #magic-line { 
    bottom: -3px; 
} 

.navbar-default{ 
    box-shadow: none; 
} 

.nav>li{ 
    position:static !important; 
} 

.navbar-default .navbar-nav>li.active a { 
    color: #7BAFD4; 
} 

.navbar-default .navbar-nav>li>a:hover{ 
color: #7BAFD4; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ 
background-color: #ffffff !important; 
} 

.navbar-container .container{ 
width: 100% !important; 
margin-left: 0; 
margin-right: 0; 
} 

.container{ 
width: 100% !important; 
} 
.navbar-nav>li{ 
float: none; 
padding-right: 60px; 
} 

.navbar-brand, .navbar-nav>li>a { 
    text-shadow:0 0px 0 rgba(0,0,0,0); 
} 

.header-logo, .brand-logo{ 
    text-align: center; 
    margin-top:-50px; 
    z-index: 0; 
    position:relative; 
} 

.gray{ 
    z-index: 100; 
    position:relative; 
} 

Answer 1

我需要隱藏的文件準備好功能.dropdown-menu類，所以我只是說這有：

$('.dropdown-menu').hide();