Навигация по выпадающему плавному переходу

Question

Просто найдите советы по получению моей навигации по раскрывающимся спискам, чтобы плавно переходить на зависание, но может показаться, что они нашли правильный путь. Я попытался добавить переход легкости в выпадающий палец, но он, похоже, не работает. Я уверен, что пропустил что-то простое.

Будьте благодарны за любые советы,

https://jsfiddle.net/rufusbear/gkmhpskm/

<div class="main-nav"> 
     <div class="row"> 
     <nav> 
      <ul class="navbar"> 
      <li><a href="#">About</a> 
       <ul> 
       <li><a href="#">History</a></li> 
       <li><a href="#">Meet The Team</a></li> 
       <li><a href="#">Facilities</a></li> 
       <li><a href="#">Opening Times</a></li> 
       <li><a href="#">Membership</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Diary</a> 
      </li> 
      <li><a href="#">Lessons</a> 
      </li> 
      <li><a href="#">Events</a> 
       <ul> 
       <li><a href="#">Corporate Days </a></li> 
       <li><a href="#">Hens & Stags</a></li> 
       <li><a href="#">Group Bookings</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Gallary</a> 
      </li> 
      <li><a href="#">Contact</a> 

      </li> 
      </ul> 
     </nav> 
     </div> 
    </div> 





.main-nav { 
    width: 100%; 
    /* Spans the width of the page */ 
    height: 60px; 
    margin-top: 1%; 
    /* Ensures there is no space between sides of the screen and the menu */ 
    z-index: 99; 
    /* Makes sure that your menu remains on top of other page elements */ 
    position: relative; 
    background-color: #718373; 
} 

.navbar { 
    height: 60px; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    /* Ensures that the menu doesn’t affect other elements */ 
} 

.navbar li { 
    height: auto; 
    width: 150px; 
    /* Each menu item is 150px wide */ 
    float: left; 
    /* This lines up the menu items horizontally */ 
    text-align: center; 
    /* All text is placed in the center of the box */ 
    list-style: none; 
    /* Removes the default styling (bullets) for the list */ 
    font-size: 90%; 
    padding: 0; 
    margin: 0; 
    background-color: #718373; 
} 

.navbar a { 
    text-decoration: none; 
    /* Removes the default hyperlink styling. */ 
    color: white; 
    /* Text color is white */ 
    display: block; 
    line-height: 60px; 
} 

.navbar li ul { 
    display: none; 
    /* Hides the drop-down menu */ 
    height: auto; 
    margin: 0; 
    /* Aligns drop-down box underneath the menu item */ 
    padding: 0; 
    /* Aligns drop-down box underneath the menu item */ 
} 

.navbar li:hover ul { 
    display: block; 
    /* Displays the drop-down box when the menu item is hovered over */ 
} 

.navbar li ul li { 
    background-color: #718373; 
} 

.navbar li ul li a:hover { 
    border: 3px solid #fff; 
    padding: 0; 
} 
.row { 
    max-width: 950px; 
    margin: 0 auto; 
    position: relative; 
    text-align: center; 
} 

Answer 1

Вы можете использовать переход CSS или вы можете использовать JQuery .Show()

Here is the documentation

Css Transition W3schools

Answer 2

---

@import url(http://weloveiconfonts.com/api/?family=entypo); 
/*reset*/ul{list-style:none;}a{text-decoration:none;}ul,li,a{margin:0;padding:0;} 

/***** basic styles *****/ 

body { background: #E0E0E0 url('http://subtlepatterns.com/patterns/creampaper.png');} 

.container { 
    position: relative; 
    width: 800px; 
    margin: 30px auto; 
} 

.nav-container { 
    width: 650px; 
    margin: 0 100px; 
} 

p { 
    font-family: Georgia; 
    color: #333; 
} 

a { 
    font-family: 'Helvetica', 'Arial', san-serif; 
    color: #333; 
} 

/***** menu *****/ 
#navmenu { 
    display: inline-block; 
    height: 30px; 
    padding: 5px 0; 

    border: solid 1px #A3A3A3; 
    border-radius: 7px; 
    box-shadow: 2px 2px 5px #ccc; 
} 

#navmenu > li { 
    border-color: #ADADAD; 

    border-right: solid 1px #A3A3A3; 
    padding: 0 10px; 
} 

#navmenu li { 
    float: left; 
    position: relative; 
    line-height: 30px; /* must match height of ul */ 
} 

#navmenu li:hover span { color: #C89292; } 
.nav-link { 
    display: inline; 
    margin: 0 10px 0 50px; 
} 

/* icon font */ 
[class*="entypo-"] { font-family: 'Entypo', sans-serif; } 

#navmenu span[class*="entypo-"] { 
    position: absolute; 
    left: 15px; 

    color: #8f8f8f; 
    font-size: 1.5em; 
} 

/***** submenu *****/ 

/* submenu container */ 
#drop { 
    opacity: 0; 
    position: absolute; 
    top: 35px; 
    left: 0px; 
    width: 150px; 
    background: #333; 
} 

/* submenu links */ 
#drop li a { 
    background: #333; 
    color: #E0E0E0; 
    font-size: 0.8em; 
    margin-left: 10px; 
} 

/* height of submenu links */ 
#navmenu li:hover ul li { 
    height: 30px; 
    line-height: 30px; 
} 

/* submenu positioning */ 
#navmenu li:hover ul { opacity: 1; } 
#drop li { 
    float: none; 
    position: static; 
    height: 0; 
    line-height: 0; 
    background: none; 
} 

/* submenu transitions */ 
#navmenu li { transition: all 0.2s; } 
#navmenu li a { transition: all 0.5s; } 
#drop { transition: all 1s; } 
#drop li { transition: height 0.5s; } 

---

<div class = "container"> 
    <div class = "nav-container"> 
    <ul id="navmenu"> 
     <li><a href="#"><span class = "entypo-home"></span><span class = "nav-link">Home</span></a></li> 
     <li><a href="#"><span class = "entypo-lamp"></span><span class = "nav-link">About</span></a></li> 
     <li><a href="#" id = "submenu"><span class = "entypo-book-open"></span><span class = "nav-link">Products</span></a> 
     <ul id = "drop" > 
      <li><a href="#">Widgets</a></li> 
      <li><a href="#">Thingamabobs</a></li> 
      <li><a href="#">Doohickies</a></li> 
     </ul> 
     </li> 
     <li><a href="#"><span class = "entypo-mail"></span><span class = "nav-link"> 
     Contact</span></a></li> 
    </ul> 
    </div> 

    <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
    </p> 
</div> 

Может быть, вы хотите что-то вроде этого или, пожалуйста, проверьте эту ссылку: - http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu