title: Add Sub-Sub-Menus to a CSS menu with Sub-Menus
body: <p>I have a CSS manu that I am using with sub menus.  I was wondering how I would go about adding a sub-submenu to it.  For example, I hover over the main menu item and the submenu pops up, then I hover over the submenu item and another submenu pops up.  Here is the JS Fiddle that I am using now:</p>
  
  <p><a href="http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/" rel="nofollow">http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/</a></p>
  
  <p>Here is the CSS I am using:</p>
  
  <pre><code>.menu{
      border:none;
      border:0px;
      margin:0px;
      padding:0px;
      font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
      font-size:18px;
      font-weight:bold;
  }
  .menu ul{
      background:#006633;
      height:35px;
      list-style:none;
      margin:0;
      padding:0;
  }
  .menu li{
      float:left;
      padding:0px;
  }
  .menu li a{
      background:#006633 url("../images/seperator.gif") bottom right no-repeat;
      color:#ffffff;
      display:block;
      font-weight:normal;
      line-height:35px;
      margin:0px;
      padding:0px 25px;
      text-align:center;
      text-decoration:none;
  }
  .menu li a:hover, .menu ul li:hover a{
      background: #003f20 url("../images/hover.gif") bottom center no-repeat;
      color:#FFFFFF;
      text-decoration:none;
  }
  .menu li ul{
      background:#006633;
      display:none;
      height:auto;
      padding:0px;
      margin:0px;
      border:0px;
      position:absolute;
      width:225px;
      z-index:200;
      /*top:1em;
      /*left:0;*/
  }
  .menu li:hover ul{
      display:block;
  }
  .menu li li {
      background:url('../images/sub_sep.gif') bottom left no-repeat;
      display:block;
      float:none;
      margin:0px;
      padding:0px;
      width:225px;
  }
  .menu li:hover li a{
      background:none;
  }
  .menu li ul a{
      display:block;
      height:30px;
      font-size:12px;
      font-style:normal;
      margin:0px;
      padding:0px 10px 0px 15px;
      text-align:left;
  }
  .menu li ul a:hover, .menu li ul li:hover a{
      background:#003f20 url('../images/hover_sub.gif') center left no-repeat;
      border:0px;
      color:#ffffff;
      text-decoration:none;
  }
  .menu p{
      clear:left;
  }
  </code></pre>
  
  <p>Here is the HTML i am using:</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" target="_self" &gt;Main Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" target="_self" &gt;Main Item 2&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#" target="_self" &gt;Test Sub Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_self" &gt;Test Sub Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_self" &gt;Test Sub Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_self" &gt;Test Sub Item&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" target="_self" &gt;Main Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" target="_self" &gt;Main Item 4&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#" target="_self" &gt;Test Sub Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_self" &gt;Test Sub Item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" target="_self" &gt;Test Sub Item&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;                
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>