I have a 2-level drop down menu that looks great in all browsers. Now I want to add a 3rd level. How do I do that?

Here is my HTML for the menu:

    <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>

and here is my 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; }

Any help would be most appreciated!

Many thanks :)