Making sub menu run horizontal - html

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>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul>
<li class="services1">
PRINT
BRANDING
EDITORIAL
PHOTOGRAPHY
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</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;
}

Answer 2

try this: http://jsfiddle.net/pzC2g/
<nav>
<ul class='root'>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul class='sub'>
<li>PRINT</li>
<li>BRANDING</li>
<li>EDITORIAL</li>
<li>PHOTOGRAPHY</li>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li>
</ul>
</nav>
and css
.root {
display: block;
}
.root li {
display: inline-block;
float: left;
margin-right: 20px;
}
.root li .sub {
display: none;
}
.root li:hover .sub {
display: block;
position: absolute;
}
.root li:hover .sub li {
display: inline-block;
float: left;
}

Answer 3

Updated the above with Styles, see link : http://jsfiddle.net/pzC2g/27/
Thanks Goldj for great support,
**
*, html{
margin: 0;
padding:0;
}
nav{
background-color: #222;
}
.wrapper{
margin: 0 auto;
padding: 0px;
max-width: 1150px;
min-height:100%;
}
.root {
display: block;
}
.root li {
padding:10px;
display: inline-block;
margin-right: 20px;
color: #fff;
}
.root li:hover{
background-color:#555;
}
.root li a{
display:block;
text-decoration:none;
color:inherit;
}
.root li a:hover{
display:block;
}
.root li .sub {
background-color: #fff;
border: 1px solid #222;
margin-top: 10px;
left:0;
width:99.9%;
display: none;
font-size:14px;
}
.root li:hover .sub {
display: block;
position: absolute;
}
.root li:hover .sub li {
color: #000;
display: inline-block;
float: left;
}
.root li .sub li:hover {
background-color: #222;
color: #fff;
}
<nav>
<div class="wrapper">
<ul class='root'>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul class='sub'>
<div class="wrapper">
<li>PRINT</li>
<li>BRANDING</li>
<li>EDITORIAL</li>
<li>PHOTOGRAPHY</li>
</div>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
**