Horizontal navigation with sub-nav problems - html

Question

I'm creating a Horizontal menu with a single line drop down sub nav.
When I rollover my main navigation links it displays the sub nav but pushes the rest of the content to the right. I would like the submenu to appear to the far left of the main menu and for it not to affect the main menu. Thanks!
Fiddle
HTML
<ul id="nav">
<li>LINK1</li>
<li>LINK2
<ul>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
<li>LINK6</li>
</ul></li>
<li>LINK7</li>
<li>LINK8</li>
CSS
#nav{
display:block;
list-style:none;
text-align: left;
}
#nav a{
width: 50px;
height: 15px;
text-decoration:none;
display:block;
font-size:12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
color:#666666;
border-left: 1px solid #999999;
float:left;
padding: 10px 5px 5px 5px;
}
#nav a:hover, #nav a:focus {
background: #999 ;
color:#333;
}
#nav li {
height: 30px;
display:block;
position:relative;
float:left;
}
#nav li ul {
height: 30px;
position: absolute;
left: -9999px;
}
#nav li:hover ul {
position: relative;
left: 0;
clear: both;
}
#nav li li a{
width: 50px;
text-decoration:none;
display:block;
font-size:9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align:center;
border-left: 1px solid #999999;
color:#666666;
padding: 5px 0 5px 0;
z-index: 10000;
vertical-align: middle;
}

Answer 1

Made a few changes and it's working, mainly:
#nav li:hover ul {
left: 0;
top: 100%;
white-space: nowrap;
word-spacing: -1em;
clear: both;
}
#nav li li {
word-spacing: normal;
display: inline-block;
float: none;
}
jsFiddle Demo

Answer 2

you can use it too
fiddle : http://jsfiddle.net/8GYbh/9/
#nav li {
height: 30px;
display:inline;
}
#nav li:hover ul {
position: absolute;
left: 0;
clear: both;
top:45px;
}