title: CSS Menu Slide Down
body: <p>I am trying to get my menu to slide down on hover (looks like slowly moving as opposed to just popping up). I have found a lot of things to try but nothing seems to work which makes me think I am putting code in the wrong places. </p>
  
  <p>Since the drop-down menus are different heights I was trying to use max-height to make it work. </p>
  
  <p>I thank you in advance for your time. </p>
  
  <pre><code>    &lt;div id="navbar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-btn"&gt;LEAGUE INFO&lt;/a&gt;
                  &lt;div class="dropdown-menu"&gt;                    
                      &lt;a href="aboutus.html"&gt;About Us&lt;/a&gt;
                      &lt;a href="contactus.html"&gt;Contact Us&lt;/a&gt;
                      &lt;a href="location.html"&gt;Location&lt;/a&gt;
                      &lt;a href="bod.html"&gt;B.O.D.&lt;/a&gt;
                      &lt;a href="fields.html"&gt;Field Locations&lt;/a&gt;
                      &lt;a href="boundarymap.html"&gt;Boundary Map&lt;/a&gt;
                      &lt;a href="history.html"&gt;History&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
  
  
              &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-btn"&gt;SEASON INFO&lt;/a&gt;
                  &lt;div class="dropdown-menu"&gt;
                      &lt;a href="standings.html"&gt;Standings&lt;/a&gt;
                      &lt;a href="schedules.html"&gt;Game Schedules&lt;/a&gt;
                      &lt;a href="homerunclub.html"&gt;Home Run Club&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li&gt;&lt;a href="photos.html"&gt;PHOTOS&lt;/a&gt;&lt;/li&gt;
  
              &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-btn"&gt;MISC.&lt;/a&gt;
                  &lt;div class="dropdown-menu"&gt;
                      &lt;a href="docs.html"&gt;Documents&lt;/a&gt;
                      &lt;a href="faq.html"&gt;FAQ's&lt;/a&gt;
                      &lt;a href="equipment.html"&gt;Equipment&lt;/a&gt;
                      &lt;a href="howto.html"&gt;How To...&lt;/a&gt;
                      &lt;a href="rules.html"&gt;Local Rules&lt;/a&gt;
                      &lt;a href="archives.html"&gt;Archives&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
  
              &lt;li&gt;&lt;a href="socialmedia.html"&gt;SOCIAL MEDIA&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  
  
  #navbar {
  max-width: 960px;
  background-color: rgba(0,0,0,.3);
  border: 1px #000000 solid;
  border-bottom: 0px;
  font-family: 'Montserrat', sans-serif; 
  font-weight: normal !important;
  }
  
  ul {
  list-style-type: none;
  margin: auto;
  display: table;
  padding: 0;
  overflow: hidden;
  }
  
  li {
  float: left;
  }
  
  li a, .dropdown-btn {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  transition: .5s;
  }
  
  li a:hover, .dropdown:hover .dropdown-btn {
  background-color: rgba(255,0,0,.8);
  color: #000000;
  }
  
  li .dropdown {
  display: inline-block;
  }
  
  .dropdown-menu {
  display: none;
  position: absolute;
  background-color: rgba(0,0,128,1);
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
  }
  
  .dropdown-menu a {
  color: #ffffff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  }
  
  .dropdown-menu a:hover {
  background-color: rgba(255,0,0,1);
  color: #ffffff;
  }
  
  .dropdown:hover .dropdown-menu {
  display: block;  
  }
  </code></pre>