CSS 3 Level Dropdown Menu - html

Question

so I've having problems with a 3-layer css dropdown menu. Levels 1 and 2 work just fine, but three is not showing up properly, I would like level three to branch to the right. Level three is the Anti-Matter and Deuterium tabs that should come from the "Fuel" link.
I have a jsfiddle with my problem. For those of you who cannot get it to work my code is below.
http://jsfiddle.net/IanLueninghoener/fD9eF/
Thanks everyone!
Here's my html:
<div id="nav">
<ul>
<li id="firstNavItem"><a href="index.html">Home</li>
<li>Warp
<ul>
<li>How it works</li>
<li>Warp Engine</li>
<li>Warp Factors</li>
<li>Fuel
<ul>
<li>Anti-Matter</li>
<li>Deuterium</li>
</ul>
</li>
</ul>
</li>
<li><a href="Fact-or-Fiction.html">Fact or Fiction</li>
<li>Star Trek
<ul>
<li>Enterprise</li>
<li>Voyager</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
CSS:
/* Reset */
* {
margin:0px;
padding:0px;
}
.clearFix {
clear: both;
}
/* Container */
#container {
width: 960px;
margin: 50px auto;
}
/* Red */
/* Navigation First Level */
#nav{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size:15px;
}
#nav ul{
background:#000000;
height:35px;
list-style:none;
border: 3px solid #000000;
-webkit-border-radius: 6px;
}
#nav li{
float:left;
padding:0px;
}
#nav li a{
background:#000000;
display:block;
text-align:center;
text-decoration:none;
color:#fff;
line-height:35px;
padding:0px 25px;
-webkit-border-radius: 6px;
}
#nav li a:hover{
text-decoration:none;
background: #4873b1;
color:#FFFFFF;
-webkit-border-radius: 3px;
}
/* Navigation Second Level */
#nav li ul{
position:absolute;
background:#000000;
display:none;
height:auto;
width:210px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
margin-left:-3px;
}
#nav li:hover ul{
display:block;
}
#nav li li:hover {
font-weight: 800;
}
#nav li li {
display:block;
float:none;
width:210px;
}
#nav li ul a{
text-align:left;
display:block;
height:35px;
padding:0px 10px 0px 25px;
}
/* Red */
/* Navigation First Level */
#nav_red{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size:15px;
}
#nav_red ul{
background:#cfcfcf;
height:40px;
list-style:none;
}
#nav_red li{
float:left;
padding:0px;
}
#nav_red li a{
background:#cfcfcf;
display:block;
text-align:center;
text-decoration:none;
color:#333;
line-height:40px;
padding:0px 25px;
}
#nav_red li a:hover{
text-decoration:none;
background: #915fa6;
color:#FFFFFF;
}
/* Navigation Second Level */
#nav_red li ul{
position:absolute;
background:#000000;
display:none;
height:auto;
width:210px;
}
#nav_red li:hover ul{
display:block;
}
#nav_red li li:hover {
font-weight: 800;
}
#nav_red li li {
display:block;
float:none;
width:210px;
}
#nav_red li ul a{
text-align:left;
display:block;
height:40px;
padding:0px 10px 0px 25px;
}
/* Slim */
/* Navigation First Level */
#nav_slim{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size:14px;
}
#nav_slim ul{
background:#84b41f;
height:25px;
list-style:none;
border: 3px solid #84b41f;
-webkit-border-radius: 4px;
}
#nav_slim li{
float:left;
padding:0px;
}
#nav_slim li a{
background:#84b41f;
display:block;
text-align:center;
text-decoration:none;
color:#333;
line-height:25px;
padding:0px 25px;
-webkit-border-radius: 4px;
}
#nav_slim li a:hover{
text-decoration:none;
background: #315907;
color:#FFFFFF;
-webkit-border-radius: 2px;
}
/* Navigation Second Level */
#nav_slim li ul{
position:absolute;
background:#84b41f;
display:none;
height:auto;
width:210px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
margin-left:-3px;
}
#nav_slim li:hover ul{
display:block;
}
#nav_slim li li:hover {
font-weight: 800;
}
#nav_slim li li {
display:block;
float:none;
width:210px;
}
#nav_slim li ul a{
text-align:left;
display:block;
height:25px;
padding:0px 10px 0px 25px;
}

Answer 1

Three steps and you have your 3 levels dropdown.
First, when hovering your 1st level, you only want to show the 2nd one. So instead of having #nav li:hover ul, you should have #nav li:hover > ul.
Second, if you want to be able to have your 3rd level at right of its parent, you will need to set its position to relative so add position:relative; in your class #nav li li
Finally, to show you 3rd level at right of its parent, you will have to add a new style:
#nav li li ul{
position:absolute;
top:0;
left:100%;
}
Here is your updated jsfiddle having a good looking 3 levels dropdown.