Sous menu déroulant

Bonjour,

je suis entrin de modifier un site internet créé en JAVA et mis en ligne via le portail Liferay. le site en question a été créé avec un thème que je dois modifier.
Voila, j'ai un premier menu horizontal qui est affiché normalement, puis un sous menu qui s'affiche lorsque je survol l'un des items de mon menu. Maintenant ce que je voudrai, c'est afficher un sous sous menu lorsque je survol l'un des item du sous menu.
Pour le momeny, tous ce que j'ai réussi a faire, c'est afficher le sous sous menu en meme temps que le sous menu lorque je suvol mon menu principal.
si quelqu'un pouvai m'aider ce serai vraiment génial !!

voici le code qui m'a permi de créer mes menus (fichier : navigation.vm) :

<div
#if ($page_group.isOrganization() || $page_group.isUser())
class="profile"
#else
class="sort-pages modify-pages"
#end

id="navigation"
>
<ul class="lfr-dock-list">
#if ($page_group.isOrganization() || $page_group.isUser())
<li class="group">
<span>$community_name</span>
<span class="group-indicator"></span>
</li>
#end

#foreach ($nav_item in $nav_items)
#if ($nav_item.isSelected())
#set ($nav_item_class = "selected parent-nav-item")
#else
#set ($nav_item_class = "parent-nav-item")
#end

<li class="$nav_item_class">
<a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.getName()</span></a>
#if ($nav_item.hasChildren())
<ul class="child-menu">
#foreach ($nav_child in $nav_item.getChildren())
#if ($nav_child.isSelected())
#set ($nav_child_class = "selected parent-nav-child")
#else
#set ($nav_child_class = "parent-nav-child")
#end
<li class="$nav_child_class">
<a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a>
#if ($nav_child.hasChildren())
<ul class="grandchild-menu">
#foreach ($nav_grandchild in $nav_child.getChildren())
<li>
<a href="$nav_grandchild.getURL()" $nav_grandchild.getTarget()>$nav_grandchild.getName()</a>
</li>
#end
</ul>
#end
</li>
#end
</ul>
#end
</li>
#end
</ul>
</div>


et ici un morceau de mon css :

#navigation ul {
margin: auto;
}

#navigation ul:after {
clear: ;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

.ie #navigation ul {}
.ie6 #navigation, .ie6 #navigation ul {}

#navigation li {
float: left;
position: relative;
height: 22px;
width: 150px;
}

#navigation .child-menu {
top: auto;
width: auto;
display: none;
}

.ie #navigation .child-menu {}
.ie6 #navigation .child-menu {}
#navigation .child-menu ul {}
#navigation .child-menu ul,
#navigation .child-menu li,
#navigation .child-menu a {
background: white;
}
#navigation .child-menu ul,
#navigation .child-menu li {
float: none;
}

#navigation .child-menu li {
display: block;
padding: 3px;
}

#navigation .child-menu li a {
color: #000;
display: block;
padding: 7px;
width: auto;
}

#navigation .child-menu a:hover {
background: #fff;
color: red;
}

#navigation li ul
{
position: relative;
width: auto;
}

#navigation li ul ul
{
margin: -20px 155px ;
border: 1px solid #fff ;
}

#navigation ul li ul:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

#navigation .grandchild-menu {
top: auto;
width: auto;
display: none; ///// sachant que cette ligne me permet de cacher mon sous sous menu
( et je voudrai qu'il s'affiche au survol du sous menu !!)
}
.ie #navigation .grandchild-menu {}
.ie6 #navigation .grandchild-menu {}
#navigation .grandchild-menu ul {}
#navigation .grandchild-menu ul,
#navigation .grandchild-menu li,
#navigation .grandchild-menu a {
background: white;
}

#navigation .grandchild-menu li {
color: #fff;
border: 1px solid;
display: block;
}
#navigation .grandchild-menu li {
float: none;
}

#navigation .grandchild-menu li {
display: block;
padding: 3px;
}

#navigation .grandchild-menu li a {
color: #000;
display: block;
padding: 10px;
width: 200px;
border: 1px solid black;
}


#navigation .grandchild-menu a:hover {
background: #fff;
color: #red;
}



Merci d'avance pour votre aide :)