Making sub menu run horizontal

Question

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.

HTML

    <nav>
            <ul>

                <li><a href="index.html">HOME</a></li>

                <li><a href="justjoelabout.html">ABOUT</a></li>

                <li><a href='#'><span>WORK</span></a>

            <ul>

                    <li class="services1">

                    <a href="justjoelprint.html">PRINT</a>

                    <a href="justjoelbranding.html">BRANDING</a>

                    <a href="justjoeleditorial.html">EDITORIAL</a>

                    <a href="justjoelphotography.html">PHOTOGRAPHY</a>

                    </ul>

                    </li>

                <li><a href="justjoelblog.html">BLOG</a></li>

                <li><a href="justjoelinspired.html">INSPIRED</a></li>

                <li><a href="justjoelcontact.html">CONTACT</a></li>

            </ul>

    </nav>

Here is the CSS

 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;
 }

http://jsfiddle.net/GMbCU/

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

Answer 1

Just give the child UL enough width and place each link in its own LI. You already have them displaying inline.

http://jsfiddle.net/GMbCU/7

li ul {
    width: 450px;
}