title: CSS 3 Level Dropdown Menu
body: <p>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.</p>
  
  <p>I have a jsfiddle with my problem. For those of you who cannot get it to work my code is below.
  <a href="http://jsfiddle.net/IanLueninghoener/fD9eF/" rel="nofollow">http://jsfiddle.net/IanLueninghoener/fD9eF/</a></p>
  
  <p>Thanks everyone!</p>
  
  <p>Here's my html: </p>
  
  <pre><code>&lt;div id="nav"&gt;
              &lt;ul&gt;
                  &lt;li id="firstNavItem"&gt;&lt;a href="index.html"&gt;Home&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Warp.html"&gt;Warp&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="Warp-how-it-works.html"&gt;How it works&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="Warp-Engine.html"&gt;Warp Engine&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="WarpFactors.html"&gt;Warp Factors&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Fuel&lt;/a&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="Anti-Matter.html"&gt;Anti-Matter&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="Deuterium.html"&gt;Deuterium&lt;/a&gt;&lt;/li&gt;
                             &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="Fact-or-Fiction.html"&gt;Fact or Fiction&lt;/li&gt;
                  &lt;li&gt;&lt;a href="StarTrek.html"&gt;Star Trek&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="Enterprise.html"&gt;Enterprise&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="Voyager.html"&gt;Voyager&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* 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;
  }
  </code></pre>