menu css 3er nivel??

[mysterio069]

Hola!
miren, encontre un menu desplegable en la web qe me vino de lujo! y lo edite a mis necesidades, el problema es que necesito un tercer nivel de desplegable y no se como hacerlo, ya que no entiendo bien el comportamiento de algunas reglas css, les dejo el codigo tanto css como HTML, les agradeceria qe me dijesen que tengo que añadir al css o al HTML para poner un tercer nivel desplegable y si pueden explicarme por que tendria que poner eso (ya que no me gusta solo copiar y pegar, intento comprender :D )

Código HTML:

<div id="menu">
<ul>
    <li><h2>Navegacion</h2></li>
  <li class="nivel1 primera"><a href="#" class="nivel1">Colegio</a>
 
<!--[if lte IE 6]><a href="#" class="nivel1ie">Colegio<table class="falsa"><tr><td><![endif]-->
    <ul>
        <li class="primera"><a href="#">Junta de Gobierno</a></li>
    <ul>
            <li><a href="#">Actual</a></li> 
            <li><a href="#">Anteriores</a></li>
    </ul>
        <li class="primera"><a href="#">Presentación</a></li>
        <li><a href="#">Saluda Presidente</a></li>
        <li><a href="#">Estatutos Colegiales</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
 
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
    <ul>
        <li class="primera"><a href="#">Opción 2.1</a></li>
        <li><a href="#">Opción 2.2</a></li>
        <li><a href="#">Opción 2.3</a></li>
        <li><a href="#">Opción 2.4</a></li>
        <li><a href="#">Opción 2.5</a></li>
 
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
    <ul>
        <li class="primera"><a href="#">Opción 3.1</a></li>
        <li><a href="#">Opción 3.2</a></li>
        <li><a href="#">Opción 3.3</a></li>
 
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
    <ul>
        <li class="primera"><a href="#">Opción 4.1</a></li>
        <li><a href="#">Opción 4.2</a></li>
        <li><a href="#">Opción 4.3</a></li>
 
        <li><a href="#">Opción 4.4</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
    <ul>
        <li class="primera"><a href="#">Opción 5.1</a></li>
        <li><a href="#">Opción 5.2</a></li>
 
        <li><a href="#">Opción 5.3</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
 

Código CSS:

#menu {  
float: left;
text-align: left;
font-size: 11px;
width: 170px;
font-family: Georgia, "Times New Roman", Times, serif;
}
#menu ul { list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li.nivel1 { 
width: 162px;
}
 
#menu ul li.primera { 
 
}
#menu ul li a {display: block;
text-decoration: none;
color: #000000;
background-color: #ffffff;
border-bottom: solid 1px #812a55;
border-top: none;
padding: 8px;
position: relative;
}
#menu ul li:hover {
position: relative;
background-color: #ffffff;
color: #000;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #b25b86;
color: #fff;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
left: 161px;
top:-1px!important;
top: -31px;
}
#menu ul li ul li a {width: 160px;
background-color: #d380a9;
color: #000;
}
#menu ul li ul li a:hover {position: relative;
background-color: #b25b86;
color: #FFF;
}
#menu ul li ul li ul li a {width: 160px;
background-color: #d380a9;
color: #000;
}
#menu ul li ul li ul li a:hover {position: relative;
background-color: #b25b86;
color: #FFF;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
 

Graciaass!!