title: Dropdown menu horizontal instead of vertical
body: <p>I have been trying to figure out how to fix this drop-down menu. It seems to look okay until I hover and the menu appears horizontal instead of vertical. Is it something wrong with the css?</p>
  
  <p>Thanks for your help!</p>
  
  <p><a href="https://jsfiddle.net/TcGQz/" rel="nofollow">JS Fiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt; 
  &lt;div id="wrapper"&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;nav id="mainnav"&gt;&lt;img src="../images/Website/banner.jpg" width="1280" height="120"&gt;
   &lt;ul style="list-style: none;"&gt;
        &lt;li&gt;&lt;a href="../index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="../research.htm"&gt;Research&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="../susantaylor.htm"&gt;Susan Taylor&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="../LaboratoryMembers.html"&gt;Lab Members&lt;/a&gt;
            &lt;ul&gt;
                  &lt;li&gt;&lt;a href="../currentmembers.htm"&gt;Current Members&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../formermembers.htm"&gt;Former Members&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="../gallery.htm"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="../publications.htm"&gt;Publications&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="../links.htm"&gt;Links&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="../contact.htm"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;br&gt;
   &lt;/br&gt;
  &lt;div id= "content" align="center"&gt; 
  &lt;br&gt;
  &lt;div id="content-spacer-top"&gt; &lt;/div&gt;
      &lt;div id="content-inner"&gt; &lt;!-- TemplateBeginEditable name="EditRegion3" --  &gt;EditRegion3&lt;!-- TemplateEndEditable --&gt;&lt;/div&gt;
     &lt;div id="content-space bottom"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;footer class="footer" id="footer"&gt;
    &lt;div align="center"&gt;
    &lt;p&gt;Taylor Laboratory&lt;br&gt; 
        Leichtag Biomedical Research Building
        4th Floor, Room 412
      &lt;br&gt;
      University of California, San Diego
      &lt;br&gt;
      9500 Gilman Dr. mc0654&lt;br&gt;
    La Jolla, CA 92093
    &lt;br&gt;
    Ph: (858) 534-8190
    &lt;br&gt;
    Fax: (858) 534-8193 &lt;/p&gt;
  &lt;/div&gt;
  &lt;/footer&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS
      li ul{
      display:none;
      }</p>
  
  <pre><code>li:hover ul{
    display:block;
  }
  body {
      margin: 0px;
      background-color: #CCCCCC;
  }
  .content {
      background-color: #FFFFFF;
      padding-right: 6px;
      padding-left: 6px;
  }
  .footer {
      background-color: #357f7f;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 8px;
      color: #FFFFFF;
      position: absolute;
  }
  #content {
      background-color: #FFFFFF;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      min-height: 100%;
      height: auto;
  }
  
  
  a {
      text-decoration: none;
  }
  #wrapper {
      background-color: #FFFFFF;
      width: 1280px;
      min height: 100%;
      position: relative;
      height: auto;
      min-height: 100%
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 0;
      margin-left: auto;
   }
  #content-spacer-top {
      height: 10px;
  }
  
  #content-spacer-bottom{
      height:1%;
  }
  
  #header {
      background-color: #357f7f;
      height: 2%;
      width: 100%;
  }
  #mainnav a  {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: #000000;
      text-decoration: none;
      background-color: #FFFFFF;
      float: left;
      text-align: center;
      width: 14.28%;
      padding-top: 6px;
      padding-right: 0px;
      padding-bottom: 6px;
      padding-left: 0px;
      display: block;
      list-style-type: none;
      clear: none;
      margin: 0px;
      height: 2%;
      border-top-width: thin;
      border-right-width: thin;
      border-bottom-width: thin;
      border-left-width: thin;
      border-top-style: solid;
      border-right-style: none;
      border-bottom-style: solid;
      border-left-style: none;
      border-top-color: #357F7F;
      border-right-color: #357F7F;
      border-bottom-color: #357F7F;
      border-left-color: #357F7F;
  }
  #mainnav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  }
  
  #mainnav a:hover,#mainnav a:active,#mainnav a:focus {
  color: #FFFFFF;
  text-decoration: none;
  background-color: #357F7F;
  }
  .style2 {
  font-size: small;
  color: #FFFFFF;
  }
  
  a:visited {
  color: #FFFFFF;
  background-color: #357F7F;
  }
  .style4 {font-size: x-small}
  .style5 {background-color: #357f7f; font-family: arial;}
  #footer {
  width:1280px;
  height:120px;
  float:left;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  }
  </code></pre>