How to add a 3rd level to my CSS drop down menu?

Question

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

Answer 1

Here is a basic submenu setup: 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;
}