Como crear en una barra desplegable submenus

Buenas tardes Zeus, Aqui te dejo el tema en el foro.He seguido tus pasos en los tres videos de como hacer una barra desplegable y todo ha ido genial. Ahora quiero complicarlo un poco y dentro de tutoriales (por ejemplo) y dentro de humor, quiero crear otro submenu, que hay el visible y dos escalones mas. He intentado añadir a estilos mas cosas y he llegado a poner a la derecha el otro submenu, pero no consigo que salga cuando me pongo encima de su directorio.

Espero que me haya explicado bien. Gracias por tus aportes

prueba esto y comprenderas lo facil que es hacer varios niveles en un menú y solo con css, ya si quieres darle efecto en el movimiento te toca poner algo de jquery pero no es necesario.
te sugiero que pruebes el ejemplo tal y como esta en tu editor y lo pruebes para que lo copmprendas
Css

body {
	background:#000;
}
#nav {
	float: right;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	z-index: 9999;
}
#nav .last {
	padding-right: 2px;
	background: #06F;
	background-repeat:no-repeat;
	background-position:right;
}
#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
}
#nav .on {
	color:#fff !important;
	background: #06F;
	background-position: bottom left !important;
}
#nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding: 14px 35px;
    color:#a5a5a5;
    text-decoration:none;
	text-transform: uppercase;
	background: #06F;
	background-position: top left;
}
#nav a:hover {
    color:#fff;
	background: #06F;
	background-position: bottom left;
}
#nav li{
    float:left;
    position:relative;
	
}
#nav ul {
    position:absolute;
    width:13em;
    top:3.8em;
    display:none;	
	z-index: 1;
}
#nav li ul a {
    width:9em;
    float:left;
	background-color: #2e2e2e;
	background-image: none !important;
}
#nav li ul a:hover {
	background-color: #292929;
}

#nav ul ul{
	top:auto;
	}	

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
}
#menu {
	float:left;
	width:400px;
}

Html

<div id="menu">
<ul id="nav">
      <li><a href="about.html">about</a>
        <ul>
          <li><a href="#">philosophy</a></li>
          <li><a href="#">work ethic</a></li>
          <li><a href="#">team members</a>
            <ul>
              <li><a href="#">member one</a></li>
              <li><a href="#">member two</a></li>
              <li><a href="#">member three</a></li>
            </ul>
          </li>
        </ul>
 </li></ul>
</div>