Menu horizontal avec sous menu

J'ai un problème et je me casse la tête depuis plusieurs jour dessus !:). J'ai un menu horizontal avec des sous-menu qui s'ouvrent au passage de la souris. Je souhaite pour un de ses sous-menu créer un sous-sous-menu mais je n'y arrive pas.

voici mon code html:

<ul id="menu-header" class="nav-bar">
            <li><a href="index.html">Home</a></li>
            <li class="has-flyout"><a href="#">About</a>
              <ul class="flyout">
                <li class="active"><a href="./biography.html">Biography</a></li>
                <li class="active"><a href="./artist_statement.html">Artist Statement</a></li>
              </ul>
            </li>
            <li><a href="./show_reel.html">Show Reel</a></li>
            <li class="has-flyout"><a href="#">In Works by</a>
              <ul class="flyout">
                <li class="active"><a href="#">Branch Nebula</a></li>
                <li class="active"><a href="#">DirtyFeet</a></li>
                <li class="active"><a href="#">SHH</a></li>
                <li class="active"><a href="#">Untitled|Collective</a></li>
              </ul>
            </li>
            <li class="has-flyout"> <a href="#">Cloe F. Projects</a>
              <ul class="flyout">
                <li class="active"><a href="./wish_you_were.html">I Wish You Were [Still]</a></li>
                <li class="active"><a href="./dining_unstable.html">Dining [Uns]-Table</a></li>
                <li class="active"><a href="./selves.html">...Selves</a></li>
                <li class="active"><a href="./erase.html">Erase</a></li>
                <li class="active"><a href="./just_off_surface.html">Just Off The Surface</a></li>
                <li class="active"><a href="./the_window.html">The Window</a></li>
              </ul>
            </li>
           <li class="has-flyout"> <a href="#">Gallery</a>
              <ul class="flyout">
                <li class="active"><a href="./galleryp.html">Photos</a></li>
                <li class="active"><a href="./galleryv.html">Videos</a></li>
              </ul> 
            <li class="has-flyout"> <a href="#">More...</a>
              <ul class="flyout">
                <li class="active"><a href="./reviews.html">Reviews</a></li>
                <li class="active"><a href="./links.html">Links</a></li>
              </ul>           
            <li><a href="./contact.html">Contact</a></li>
           </ul>

et mon css:

.nav-bar {
	margin-top: 0;
	background: #4D4D4D;
	width: 100%;
	height: 40px;
	}
.nav-bar > li {
	border: 0;
	padding: 0px;
	font-family: 'Open Sans Condensed',sans-serif;
	letter-spacing: 1px;
	box-shadow: none;
}
.nav-bar > li > a:first-child {
	font-size: 16px;
	text-align:center;
	text-transform: uppercase;
	padding: 0px 15px;
	box-shadow: none;
}
.nav-bar > li:last-child {
	border: 0;
	box-shadow: none;
}
.nav-bar > li.active:hover {
	background: #FFFFFF;
	cursor: default;
	-webkit-box-shadow: 2px 2px 5px #000000;
	box-shadow: 2px 2px 5px #000000;
}

.nav-bar > li:hover {
	background: #A09F9F;
	color: #000;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	-webkit-box-shadow: 2px 2px 5px #000000;
	box-shadow: 2px 2px 5px #000000;
}

.nav-bar > li > a {
	color: #FFFFFF;
}
.nav-bar > li > a:hover {
	color: #FFFFFF;
}
.active a {background:#000; color: #4D4D4D}

.nav-bar > li.has-flyout > a:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: #f8f8f8 transparent transparent transparent; position: absolute; right: 20px; top: 17px;}

.nav-bar > li.has-flyout > a:hover:first-child:after { content: ""; display: block; width: 0; height: 0; border: solid 5px; border-color: #f8f8f8 transparent transparent transparent; position: absolute; right: 20px; top: 17px;}


.flyout {background: #f3f3f3; border-radius: 5px; border: 0; margin-top: -1px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);}

ul.flyout li, .nav-bar li ul li { border-left: 0}
ul.flyout li a, .nav-bar li ul li a { background: #f3f3f3; color:#000; border: 0; font-size: 16px;}
ul.flyout li a:hover, .nav-bar li ul li a:hover { background: #A09F9F; color: #fff; border: 0;
		}

sinon un exemple a cette adresse: http://testv2.cloefournier.com/contact.html

en fait je souhaiterai créer un sous menu "concrete and bones sessions" à "branch nebula" dans le menu "In works by".

si quelqu'un peu m'aider ce serai cool

Je te conseil de ne pas remettre un sous niveau déroulant. Ce n'est pas très ergonomique.
Pourquoi ne pas afficher directement ce 3ème niveaux en même temps que le second au survol du 1er ?

<li class="active"><a href="#">Branch Nebula</a>
<ul>
<li><a href="#">concrete and bones sessions</a></li>
</ul>
</li>

merci je pense que c'est ce que je vais faire finalement... plus simple d'un point de vue ergonimoque.