title: Using CSS to display dropdown menu horizontally
body: <p>I'm trying to use a horizontal list in a web part in SharePoint. I've gone over this code over and over and can't find the issue. For some reason, the list still displays vertically. Any ideas?</p>
  
  <p>CSS</p>
  
  <pre><code>ul{
          padding: 0;
          list-style: none;
          width:100%;
          text-align:center;
          height: 100px;
          background: #ffffff no-repeat center;
      }
      ul li{
          display:inline-block;
          float: left;    padding: 25px 25px 0 125px;
          margin: 0;
          position: relative;
          font-size: 25px;    font-weight: bold;  color: #FFFFFF; 
          text-align: center;
      }
      ul li a{
          display: block;
          color: #FFF;    padding: 10px 5px;
          text-decoration: none;
      }
      ul li a:hover{
  
      }
      ul li ul.dropdown{
          min-width: 150px; /* Set width of the dropdown */
          width: 100%;
          display: none;
          position: absolute;
          z-index: 999;
          left: 0;
          float: left;
      }
      ul li:hover ul.dropdown{
          display: inline;    /* Display the dropdown */
          background: #FFFFFF;
          left: 0;
          width:100%;
          margin:0;
          padding:0;
  
      }
      ul li ul.dropdown li{
          display: inline;
          float: left;
          background: #FFFFFF;
      }
  </code></pre>
  
  <p>HTML List (still in progress; just testing before I fix all the text/links)</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Current Performance &amp;#9662;&lt;/a&gt;
          &lt;ul class="dropdown"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Grafenwoehr&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Hohenfels&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Katterbach&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Stuttgart&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Vilseck&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I haven't done this stuff in years but my boss wants me to try and make this work. -_-</p>