Comment ajouter un 3ème niveau de mon CSS menu déroulant?

J'ai un 2-niveau de menu déroulant qui a de l'allure dans tous les navigateurs. Maintenant, je veux ajouter un 3ème niveau. Comment dois-je faire?

Voici mon code HTML du 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>

et voici mon 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; }

Toute aide serait grandement appréciée!

Merci beaucoup 🙂

J'ai essayé beaucoup de choses différentes, le code est tout mélangé dans ma tête 🙂 je suis coller w/ pure CSS - pas de jquery.
regardez dans votre css. vous avez .sous-menu et sous elle .sous-menu .... .sous-menu etc. ai-je besoin de mentionner ce que vous devez faire pour le style de votre 3ème niveau de menu?
Ce sous-menu est pour le 2ème niveau du menu.

OriginalL'auteur Cynthia | 2012-09-10

  1. 7

    Ici est un sous-menu de base de l'installation: 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;
}

    OriginalL'auteur Shmiddty