title: Pure CSS Sub Dropdown Menu
body: <p>I am trying to create a menu that has 3 sub menus and I have successfully created the first 2.  My issue is with the 3rd drop-down menu,  It is only showing one <code>&lt;li&gt;</code> when there is multiple available.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>   /*Reset */
  html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset, header, footer, section, aside, nav, article, figure  { display:block; padding: 0; margin: 0; }
  
  /* Main CSS */
  html, body,#wrapper{
  
      width:990px;
      height:100%;
      min-height:100%;
      margin: 0 auto;
  }
  
  #wrapper{
      position: absolute;
  }
  #header{
      position:relative z-index:500;
      background:url('../images/header.png');
      width:990px;
      height:220px;
  }
  
  /*Menu */
  nav{
      float:left;
      width:190px;
      margin:0px 0 0 40px;
  }
  
  nav ul{
      float:left;
      margin:0;
      list-style:none;
      font-size:14px;
      width:190px;
  }
  
  nav ul li{
      display:block;
      position:relative;
  }
  
  nav ul li ul{
      display:none;
  }
  
  nav ul li ul li ul li{
      display:none;
  }
  
  nav ul li:hover ul{
      display: block;
      position:absolute;
      left:190px;
      top:0px;
  }
  
  nav ul li ul li:hover li{ /* edit page drop down */
      display:block;
      position:absolute;
      left:0px;
      top:0px;
  }
  
  
  nav li a{
      font-size:14px;
      color:#fff;
      line-height:25px; /*Text Hight On Button */
      text-decoration:none;
      text-indent:25px;
      display:block;
      margin-left:-40px;
      width:190px;
      height:27px;
      background-image:url('../images/normal.png');
  }
  
  nav a:hover{
      background-image:url('../images/onclick.png');
  }
  
  /*Content */
  
  #content{
      margin: 0 0 0 190px;
      width:815px;
      height:95%;
  }
  
  #content h1{
      margin: 5px 0 0 10px;
      font-family: 'Josefin Slab', arial, serif;
      font-size:24px;
  }
  
  #content p{
      margin:0 0 0 15px;
  }
  
  #content li{
      margin:0 0 0 35px;
  }
  
  .clear{
      clear:both;
      margin:0;
      padding:0;
  }
  
  footer{
      float:left;
      display:block;
      clear:both;
      overflow:hidden;;
      bottom:0;
      background:url('../images/footer.png') no-repeat #000;
      width:100%;
      height:20px;
  }
  
  #leftCol{
      float:left;
      width:190px;
      height:100%;
      background:url('../images/metalnavbg.png');
      margin-bottom:0px;
  }
  
  /* Misc*/
  /* Text Formatting */
  
  #companyName{
      text-align:center;
      padding-top:45px;
      font-size:35px;
      color:#f0f0ef;
  }
  
  #companyQuote{
      text-align:center;
      font-size:18px;
      color:#a5a4a2;
  }
  
  /*Forms */
  
  /*General*/
  
  #validation{
      font-weight:bold;
      color:#ff0101;
  }
  .contactForm{
      width: 450px;
      height:425px;
      padding: 35px 25px;
      margin: 0 auto 10px;
      color: #000;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
      overflow: hidden;
  }
  
  #validation{
      font-weight:bold;
      color:#ff0101;
  }
  
  .form{
      width: 400px;
      height:100%;
      padding: 15px 25px;
      margin: 0 auto 10px;
      color: #000;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
      overflow: hidden;
  
  }
  
  .borderradius.form{
      width: 400px;
      height:100%;
      padding: 15px 25px;
      margin: 0 auto 10px;
      color: #000;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
      overflow: hidden;
  }
  
  fieldset{
      border:none;
  }
  
  #formLayout{
      border:2px solid #000;
  }
  
  #formLayout label{
     clear:  both;
      display: block;
  }
  
  #formLayout input{
      font-size:12px;
      border: 2px solid #999;
      padding: 6px 8px;
      background-color: #fff;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      -webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
      -moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
      color: #000;
      width: 250px;
  }
  
  
  
  #formLayout .small{
      color:#ff0101;
      display:block;
      font-size:11px;
      font-weight:bold;
      text-align:left;
      width:140px;
  }
  
  #formLayout textarea{
      width:250px;
  }
  
  #error{
  
      width:250px;
      height:20px;
      margin:-30px 0 0 270px;
      padding-bottom:10px;
  }
  
  #error p{
      color:#ff0101;
      text-align:left;
  }
  
  /* Specific Form Class's */
  
  .login{
      width: 470px;
      height:250px;
      padding: 15px 25px;
      margin: 0 auto 10px;
      color: #000;
      -moz-border-radius:15px;
      -webkit-border-radius:15px;
      overflow: hidden;
  
  }
  
  .login label{
      font-weight:bold;
  }
  .login .loginSubmit{
          margin-top:25px;
  }
  /*Gallery CSS */
  
  
  #gallery{
      width:120px;
      margin-left:5px;
      display: inline;
  }
  
  #gallery .thumbnail{
      margin:0 auto;
      display:inline;
  } 
  
  #gallery img{
      margin:5px;
  }
  
  #sales{
      width:190px;
      height:195px;
      margin-left:15px;
      display:inline-block;
      border: 1px solid red;
  }
  
  
  #sales .location{
      float:left;
      text-align:center;
      font-weight:bold;
      margin-left:15px;
  }
  
  #sales .price{
      float:left;
      text-align:left;
      font-weight:bold;
      padding-left:5px;
      color:#ff0101;
  }
  
  #deleteImage{
      float:left;
      margin-left:25px;
      width:100px;
      height:100px;
  }
  
  #deleteImage .thumbnail{
      margin:0 auto;
      height:90px;
      width:90px;
  }
  </code></pre>