javascript/css navigation menu not hiding nested ul

I have a navigation made and it has sub-levels, which works fine. However, I now want to add ANOTHER level to a sub-level, so that I can choose Lookup-->Webinar-->By Date

The way I have this set up, the extra level is not hidden by default. It is only supposed to show when the word "Webinar" gets hovered over. Can someone help?

<div id="menuwrapper">

<ul id="p7menubar">

<li><a href="#" class="trigger">Lookup</a>

    <ul>

        <li><a href="/ProductLookup.aspx">Product</a></li>

        <li><a href="/CategoryLookup.aspx">Category</a></li>

        <li><a href="#" class="subtrigger">Webinar</a>

            <ul>

            <li><a href="/WebinarLookupByDate.aspx">By Date</a></li>

            <li><a href="/WebinarLookupByName.aspx">By Name</a></li>

            <li><a href="/WebinarLookupByCategory.aspx">By Category</a></li>

            </ul>

        </li><!--end subtrigger-->

     </ul>

 </li><!-- end lookup trigger -->

</ul><!--end p7menubar-->

<br class="clearit" />

</div><!--end menuwrapper-->





/* 

------------------------------------

PVII Menu CSS Express Drop-Down Menu

by Project Seven Development

www.projectseven.com

------------------------------------

*/



body {

    font-family: "Trebuchet MS", Arial, sans-serif;

    font-size: 100%;

    background-color: #FFFFFF;

    margin: 24px 0;

    padding: 0; }



#menuwrapper {

    border-bottom: 1px solid #EAEAEA;

    background-color: #909090;

    width: 100%;

    background-image: url(/images/loginStatusBkgd.png);

    background-repeat: repeat-x;

    height: 29px;

    font-size: 10pt; }



.clearit {

    clear: both;

    height: 0;

    line-height: 0.0;

    font-size: 0; }





#p7menubar, #p7menubar ul {

    padding: 0;

    margin: 0;

    list-style: none;

    font-family: Arial, Helvetica, sans-serif;

    padding-right: 10px;

    padding-left: 10px;

    font-size: 10pt; }



#p7menubar a {

    display: block;

    text-decoration: none;

    padding: 7px 10px 5px 10px;

    border-right: 1px solid #EAEAEA;

    font-size: 10pt;

    color: #909090; }



#p7menubar a.trigger {

    padding: 7px 16px 5px 10px;

    background-image: url(/images/p7PM_dark_south.gif);

    background-repeat: no-repeat;

    background-position: right center;}



#p7menubar a.subtrigger{

    padding: 2px 0px 5px 16px;  

    background-image: url(/images/p7PM_dark_south.gif);

    background-repeat: no-repeat;

    background-position: right center; }



#p7menubar li {

    float: left;

    width: 9em; }



#p7menubar li ul, #p7menubar ul li  {

    width: 12em; }



#p7menubar ul li a  {

    color: #565656;

    border-right: 0;

    padding: 3px 12px 3px 16px; }



#p7menubar li ul {

    position: absolute;

    display: none;

    background-color: #FFFFFF;

    border: 1px solid #EAEAEA; }





#p7menubar li:hover a, #p7menubar a:focus,

#p7menubar a:active, #p7menubar li.p7hvr a {

    background-color: #365F91;

    color: White;

    text-decoration: none; }



#p7menubar li:hover ul, #p7menubar li.p7hvr ul {

display: block; }



#p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {

background-color: #365F91;

    color: #909090;

    text-decoration: none;

    background-color: transparent; }



#p7menubar ul a:hover {

    background-color: #365F91!important;

    color: White!important; }



#p7menubar li {width: auto; }









I don't know if the javascript will help, but I threw it in too.

*/

function P7_ExpMenu(){ //v1.1.0.2 by PVII-www.projectseven.com

if(navigator.appVersion.indexOf("MSIE")==-1){return;}

var i,k,g,lg,r=/\s*p7hvr/,nn='',c,cs='p7hvr',bv='p7menubar';

for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){

lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){

lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs;

this.className=cl;};lg[k].onmouseout=function(){c=this.className;

this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}}