title: Animating a HTML Dropdown Menu
body: <p>I've been trying to animate this drop down menu for ages, spending hours editing everything I thought was relevant and it still doesn't work. I have a few linked pages, the source code in HTML5, and several bootstrap pages as well as one styling sheet. Here is the source code:</p>
  
  <pre><code>&lt;div class = "navigation"&gt; 
  
          &lt;button class = "btn btn-primary dropdown-toggle" type = "button" data-toggle = "dropdown"  id = "navButton"&gt; Navigation&lt;/button&gt;
              &lt;ul class = "dropdown-menu" id = "dropdown"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;  
                  &lt;li&gt;&lt;a href="#"&gt;Picture Gallery&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Families&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Latest News&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Local Services&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Housing Development&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I wont copy the whole of each bootstrap files for obvious reasons, but here is my StyleSheet for the dropdown itself:</p>
  
  <pre><code>#navButton{
  background-color: #0783FF;
  border: none;
  color: #FFF;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-family: "Segoe UI";
  width: 100%;
  
  }
  #navButton:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  content: 'a-chevron-down';
  transition: 0.5s;
  
  }
  #dropdown ul li:after{
      background-color: #0783FF;
      border: none;
      color: #FFF;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      font-family: "Segoe UI";
      width: 100%;
  
  }
  #dropdown{
      width: 100%;
      font-size: 16px;
      font-family: "Segoe UI";
      text-align: center;
      background-color: #0669CC;
      color: #FFF !important;
  
  }
  </code></pre>
  
  <p>The dropdown itself works fine, when I click it the menu appears with all <code>buttons responding properly. The only issue is that I want it to 'slide' down</code> rather than just appear. I've looked at several different tutorials and I still can't figure out what the issue is. I'm not sure whether the animating code goes in my style sheet or the bootstrap.css sheet.</p>
  
  <p>Any help would be appreciated,
  Thanks.</p>