¿Cómo agregar un tercer nivel a mi menú desplegable de CSS?

Question

Tengo un menú desplegable de 2 niveles que se ve muy bien en todos los navegadores. Ahora quiero agregar un tercer nivel. ¿Cómo puedo hacer eso?

Aquí es mi HTML para el menú:

<div class="nav"> 
     <div class="navbar"> 
      <ul class="menu"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About JoyFactory</a> 
       <ul class="sub-menu"> 
       <li><a href="#">Who We Are</a></li> 
       <li><a href="#">Our Education Concept</a></li> 
       <li><a href="#">References</a></li> 
       </ul> 
      </li> 
      <li><a href="#">JoyFactory Kinderkrippe</a> 
       <ul class="sub-menu"> 
       <li><a href="#">JoyFactory Kinderkrippe Oerlikon</a> 
        <ul> 
        <li><a href="#">item 1</a></li> 
        <li><a href="#">item 2</a></li> 
        <li><a href="#">item 3</a></li> 
        <li><a href="#">item 4</a></li> 
        </ul> 
       </li> 
       <li><a href="#">JoyFactory Kinderkrippe Seebach</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div> 
    </div> 

y aquí es mi CSS:

.nav { clear:both ; 
    width:1020px ; 
    height:55px ; 
    background:url("images/nav-bg.png") no-repeat ; 
    position:absolute ; 
    top:125px ; 
    left:-10px ; 
    } 

     .navbar { width:1000px ; 
     height:50px ; 
     margin:auto ; 
     } 

      ul.menu { margin-left:0 ; 
      padding-left:0 ; 
      list-style-type:none ; 
      } 

      .menu li { display:inline ; 
      float:left ; 
      height:50px ; 
      margin:0 6px ; 
      } 

      .menu li a { font-family:'MyriadPro-SemiboldCond' ; 
      font-size:24px ; 
      color:#ffffff ; 
      text-decoration:none ; 
      height:50px ; 
      line-height:50px ; 
      padding:0px 10px ; 
      } 

      .menu li:hover, .menu li:hover a { background:#ffd322 ; 
      color:#e32a0e ; 
      } 

      .sub-menu { position:absolute ; 
      float:none ; 
      padding:0 ; 
      top:50px ; 
      z-index:9999 ; 
      background:#ffd322 ; 
      margin-left:0 ; 
      padding-left:0 ; 
      } 

      .sub-menu li { display:none ; 
      min-width:175px !important ; 
      margin: 0 !important; 
      padding: 0 !important; 
      } 

      .sub-menu li a, .current-menu-parent .sub-menu li a { display:block ; 
      background:#ffd322 ; 
      font-family:arial,helvetica,sans-serif ; 
      font-size:16px ; 
      padding:0 10px ; 
      border-top:1px solid #f37f10 ; 
      border-left:none ; 
      } 

      .sub-menu li a:hover, .menu li.current-menu-parent .sub-menu li.current-menu-item a { background:#f37f10 } 

      .menu li:hover li { float: none; display:block; clear: both; } 

Cualquier ayuda sería muy apreciada!

Muchas gracias :)

Answer 1

Aquí es un submenú de configuración básica: http://jsfiddle.net/Wss5A/

* { 
    list-style:none; 
    margin:0; 
    padding:0; 
    font-size:1em; 
    cursor:pointer; 
} 

#menu{ 
    margin:3px; 
} 

#menu > li{   /* Top Level */ 
    float:left; 
    margin-right:3px; 
} 
#menu > li > span{ 
    display:block; 
    background:#0ac; 
    padding:3px 10px; 
} 
#menu > li:hover > span{ 
    color:#fff; 
} 

#menu > li > ul{  /* Second Level */ 
    display:none; 
    background:#08a; 
} 
#menu > li:hover > ul{ 
    display:block; 
    position:absolute; 
} 
#menu > li > ul > li > span{ 
    display:block; 
    padding:3px 10px; 
    border-top:solid 3px #fff; 
} 
#menu > li > ul > li:hover > span{ 
    color:#fff; 
} 

#menu > li > ul li > ul{ /* Third Level & beyond */ 
    display:none; 
    background:#068; 
} 
#menu > li > ul li:hover > ul{ 
    display:block; 
    position:absolute; 
    left:100%; 
    border-left:solid 3px #fff; 
    top:0; 
    width:auto; 
} 
#menu > li > ul > li ul > li{ 
    display:block; 
    padding:3px 10px; 
    border-top:solid 3px #fff; 
    white-space:nowrap; 
} 
#menu > li > ul > li ul > li:hover > span{ 
    color:#fff; 
}