title: Dropdown menu in HTML/CSS doesn't actually "drop down"
body: <p>I'm trying to add a drop-down menu for one of the options in my nav menu for a simple html page. However, when I hover over the nav menu option, the menu doesn't actually drop down. It just replaces the nav menu option with the first option in the drop-down whenever I hover over it. I'm not exactly sure why it isn't "dropping down". </p>
  
  <p>Any help would be really appreciated... Here's the HTML for the nav and attempted drop-down.</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="eiffel.shtml"&gt;Eiffel Tower&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="fashion.shtml"&gt;Fashion&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="food.shtml"&gt;Food&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="museums.shtml"&gt;Museums&lt;/a&gt;&lt;/li&gt;
          &lt;div class="dropDiv"&gt;
              &lt;li class="dropdown"&gt;&lt;a href="history.shtml"&gt;History&lt;/a&gt;&lt;/li&gt;
                  &lt;div class="dropdownContent"&gt;
                      &lt;a href=leaders.shtml&gt;Leaders of Paris&lt;/a&gt;
                      &lt;a href=future.shtml&gt;Future of Paris&lt;/a&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;li&gt;&lt;a href="language.shtml"&gt;Language&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="works.shtml"&gt;Works Cited&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and here is the CSS snippet for the Dropdown menu:</p>
  
  <pre><code>.dropdown {
      float: left;
      background-color: #FFF0F5; 
      width: 100%;
  }
  
  .dropDiv {
      position: relative;
      display: inline-block;
      width: 100%;
  }
  
  .dropdownContent {
      display: none;
      position: absolute;
      background-color: #FFF0F5;
      height: 200px;
      width: 100%;
      z-index: 1;
  }
  
  .dropdownContent a {
      display: block;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  .dropdownContent a:hover {background-color: #fff8dc;}
  
  .dropDiv:hover .dropdownContent {
      display: block;
      z-index: 1;
      height: 200px;
  }
  
  .dropDiv:hover .dropdown {
      background-color: #fff8dc;
  }
  </code></pre>
  
  <p>I'm not really sure why the drop-down part isn't displaying, i'm sure it's some stupid mistake but it's eluded me for an hour and a half...</p>