Как добавить третий уровень в мое меню CSS с появлением / исчезновением при наведении

Я вроде как пытаюсь добавить третий уровень в мое меню css. Мне удалось создать третий уровень в моем выпадающем меню, но эффект появления/исчезновения при наведении не появляется.

   <pre> <style type="text/css">
*                   { margin: 0; padding: 0; }
body                { font: 15px Helvetica, Sans-Serif; } 
html                { overflow-y: scroll; }
p                   { margin: 0 0 0 0; }
a                   { text-decoration: none; }
img                 { vertical-align: middle; }
ul                  { list-style: none;}


/* 
  LEVEL ONE
*/
ul.dropdown                         { position: relative; width: 100%; z-index: 5000;}
ul.dropdown li                      { font-weight: bold; float: left;margin-left: 0; width: 160px; background: #7C73AF; position: relative;list-style: none;}
ul.dropdown a:hover                 { color: white;position: relative; }
ul.dropdown li a                    { display: block; padding: 3px 8px; color: white; position: relative; z-index: 2000; }
ul.dropdown li a:hover,
ul.dropdown li a.hover              { background: #552588; position: relative;  }


/* 
  LEVEL TWO
*/
ul.dropdown ul                      { display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 1000; }
ul.dropdown ul li                   { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc;list-style: none; }
ul.dropdown ul li a                 { display: block; background: #A39ABF !important; } 
ul.dropdown ul li a:hover           { display: block; background: #552588 !important; color: white}

ul.sub_menu                         {margin-left: -12px;} 

/* 
    LEVEL THREE
*/
ul.dropdown ul.sub_menu ul                  { left: 100%; top: 0; }
ul.sub_menu  li:hover > ul      { visibility: visible; width: 12em;
height: auto;
float: left;}


ul.sub_menu2                        {margin-left: -12px;}

</style>
<code>

Здесь jsp отображает меню:

 <script type="text/javascript" src="${context}/media/jQueryLib/menujQuery/js/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="${context}/media/jQueryLib/menujQuery/js/jquery.dropdown.js"></script> <table cellspacing="0" cellpadding="0"><tr><td> <ul class="dropdown"> <li ><a href="#"><fmt:message key="topMenu.admin"/></a> <ul class="sub_menu" > <li><a href="${context}/admin/home.nx"><fmt:message key="topMenu.admin.campaign"/></a></li> <li><a href="${context}/admin/PlantManage.nx"><fmt:message key="topMenu.admin.plant"/></a></li> <li><a href="${context}/admin/users.nx" ><fmt:message key="topMenu.admin.users"/></a></li> <li><a href="${context}/admin/ChapterQuestionsManage.nx"><fmt:message key="topMenu.admin.chapterQuestion"/></a></li> <li><a href="${context}/admin/emailtemplatemanage.nx"><fmt:message key="topMenu.admin.emailTemplate"/></a></li> <li><a href="${context}/admin/corporateRecipientManage.nx"><fmt:message key="topMenu.admin.corporateRecipient"/></a></li> <li><a href="${context}/admin/countryAreaManage.nx"><fmt:message key="topMenu.admin.countryManager"/></a></li> <li><a href="#"><fmt:message key="topMenu.admin.exportExcelGeneral"/></a> <ul class="sub_menu2"> <li><a href="${context}/admin/excel.nx"><fmt:message key="topMenu.admin.exportExcelEMP"/></a></li> <li><a href="#"><fmt:message key="topMenu.admin.exportExcelEvaluation"/></a></li> </ul> </li> </ul> </li> </ul> </td> <td> <ul class="dropdown"> <li><a href="#"><fmt:message key="topMenu.carbone"/></a> <ul class="sub_menu"> <li><a href="${context}/admin/carbone.nx"><fmt:message key="topMenu.Emission"/></a></li> <li><a href="${context}/admin/carboneExportManage.nx?action=INPUT_LIST"><fmt:message key="topMenu.paramExcel"/></a></li> <li><a href="${context}/admin/feTemplateManage.nx?action=UPLOAD_CARBONE"><fmt:message key="topMenu.uploadCarboneExcel"/></a></li> <li><a href="${context}/admin/carbone.nx?action=addcountry"><fmt:message key="carbone.add.newcountry"/></a></li> </ul> </li> </ul> </td></tr></table>

Что я сделал не так?