javascript - 如何在鼠标悬停时显示/消失将第三级添加到我的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>



我做错了什么 ？

最佳答案

您用display:none隐藏了ul，但尝试用visibility:visible显示它

ul.dropdown  ul > li > ul {
    visibility:hidden;
}
ul.dropdown  ul > li:hover > ul  {
    visibility:visible;
}

要么

ul.dropdown  ul > li > ul {
    display:none;
}
ul.dropdown  ul > li:hover > ul  {
    display:block;
}

关于javascript - 如何在鼠标悬停时显示/消失将第三级添加到我的CSS菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23469617/