CSS Level 3 Dropdown

Question

therefore, I had problems with a drop-down menu with 3 layers. Levels 1 and 2 work fine, but three are not displayed properly, I would like level 3 to be directed to the right. The third level is the Anti-Matter and Deuterium tabs, which should come from the Fuel link.

I have jsfiddle with my problem. For those of you who can't make it work, my code is below. http://jsfiddle.net/IanLueninghoener/fD9eF/

Thanks everyone!

Here is my html:

<div id="nav"> <ul> <li id="firstNavItem"><a href="index.html">Home</li> <li><a href="Warp.html">Warp</a> <ul> <li><a href="Warp-how-it-works.html">How it works</a></li> <li><a href="Warp-Engine.html">Warp Engine</a></li> <li><a href="WarpFactors.html">Warp Factors</a></li> <li><a href="">Fuel</a> <ul> <li><a href="Anti-Matter.html">Anti-Matter</a></li> <li><a href="Deuterium.html">Deuterium</a></li> </ul> </li> </ul> </li> <li><a href="Fact-or-Fiction.html">Fact or Fiction</li> <li><a href="StarTrek.html">Star Trek</a> <ul> <li><a href="Enterprise.html">Enterprise</a></li> <li><a href="Voyager.html">Voyager</a></li> </ul> </li> <li><a href="about.html">About</a></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 a drop-down list of 3 levels.

First, when you hover your 1st level, you want to show only the 2nd level. So instead of #nav li:hover ul you should have #nav li:hover > ul .

Secondly, if you want to have your 3rd level to the right of your parent, you will need to set its position relative, so add position:relative; to your class #nav li li

Finally, to show you the 3rd level to the right of his parent, you will need to add a new style:

 #nav li li ul{ position:absolute; top:0; left:100%; } 

Here is your updated jsfiddle having a 3-level drop down menu.