title: Making sub menu run horizontal
body: <p>I'm having a bit of trouble turning my vertical sub menu into a horizontal one, everything I try seems to be incorrect or I end up changing the rest of the look of the main menu.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;nav&gt;
              &lt;ul&gt;
  
                  &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="justjoelabout.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;WORK&lt;/span&gt;&lt;/a&gt;
  
              &lt;ul&gt;
  
                      &lt;li class="services1"&gt;
  
                      &lt;a href="justjoelprint.html"&gt;PRINT&lt;/a&gt;
  
                      &lt;a href="justjoelbranding.html"&gt;BRANDING&lt;/a&gt;
  
                      &lt;a href="justjoeleditorial.html"&gt;EDITORIAL&lt;/a&gt;
  
                      &lt;a href="justjoelphotography.html"&gt;PHOTOGRAPHY&lt;/a&gt;
  
                      &lt;/ul&gt;
  
                      &lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="justjoelblog.html"&gt;BLOG&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="justjoelinspired.html"&gt;INSPIRED&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="justjoelcontact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
  
      &lt;/nav&gt;
  </code></pre>
  
  <p>Here is the CSS</p>
  
  <pre><code> nav {
  height: 70px;
  float: left;
  font-size: 20px;
  color: #00BCDC;
  font-family: "geogtq md";
   }
  
   nav ul {
  list-style-type: none;
  color: #00BBE4;
  font-family: "geogtq md";
  float: left;
  display:inline; 
   }
  
   nav li {
  float: left;
  margin-right: 20px;
  color: #00BBE4;
  font-family: "geogtq md";
  margin-left: auto;
  display: inline;
   }
  
   a:link {
  text-decoration: none;
  color: #00C0EE;
  font-family: "geogtq md";
   }
   a:visited {
  text-decoration: none;
  color: #00C0EE;
   }
   a:hover {
  text-decoration: none;
  color: #007889;
   }
   a:active {
  text-decoration: none;
  color: #00C0EE;
   }
  
  
   ul {
  font-family: "geogtq md";
  font-size: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
   }
   ul li {
  display: inline;
  position: relative;
  float: left;
   }
  
   li ul {
  display: none;
   }
  
   ul li a {
  text-decoration: none;
  margin-right:5px;
  white-space: nowrap;
  color:#066;
   }
  
   li:hover ul {
  display: inline;
  position: absolute;
   }
  
   li:hover li {
  float: none;
  font-size: 16px;
  font-weight:bold;
  margin-top:3px;
   }
  
   .services1 a {
  color:#00C0EE;
  float: left;
  list-style-type: none;
  display:inline;
   }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/GMbCU/" rel="nofollow">http://jsfiddle.net/GMbCU/</a></p>
  
  <p>Any help would be greatly appreciated as this has been going on for a while and would help with how things sit on my site, thanks</p>