当我将鼠标悬停在顶层导航菜单上时，我没有获得子级菜单。
从HTML检索到的嵌套导航菜单的 browser view source 结构如下所示。
<div id="topmenu-position">
<nav class="sort-pages modify-pages" id="navigation" role="navigation">
<ul aria-label="Site Pages" role="menubar">
<li aria-selected='true' class="selected firstli " id="layout_1" role="presentation">
<a aria-labelledby="layout_1" aria-haspopup='true' href="http://localhost:8080/web/guest/home" role="menuitem">
<span> Home</span>
</a>
<ul class="child-menu" role="menu">
<li aria-selected='true' class="selected firstli " id="layout_8" role="presentation">
<a aria-labelledby="layout_8" href="http://localhost:8080/web/guest/partners" role="menuitem">Partners</a>
</li>
<li aria-selected='true' class="selected lastli" id="layout_9" role="presentation">
<a aria-labelledby="layout_9" href="http://localhost:8080/web/guest/lmic-members" role="menuitem">LMIC Members</a>
</li>
</ul>
</li>
<li class=" " id="layout_3" role="presentation">
<a aria-labelledby="layout_3" href="http://localhost:8080/web/guest/biobanks" role="menuitem">
<span> Governance</span>
</a>
<ul class="child-menu" role="menu">
<li class=" firstli " id="layout_12" role="presentation">
<a aria-labelledby="layout_12" href="http://localhost:8080/web/guest/add-biobanks" role="menuitem">Advisory Committee</a>
</li>
</ul>
</li>
<li class=" " id="layout_4" role="presentation">
<a aria-labelledby="layout_4" href="http://localhost:8080/web/guest/sample-collections" role="menuitem">
<span> Projects</span>
</a>
</li>
<li class=" " id="layout_5" role="presentation">
<a aria-labelledby="layout_5" href="http://localhost:8080/web/guest/samples" role="menuitem">
<span> Links</span>
</a> </li>
<li class=" " id="layout_6" role="presentation">
<a aria-labelledby="layout_6" href="http://localhost:8080/web/guest/search" role="menuitem">
<span> Search</span>
</a>
</li>
<li class=" lastli" id="layout_7" role="presentation">
<a aria-labelledby="layout_7" href="http://localhost:8080/web/guest/contact" role="menuitem">
<span> Contact</span>
</a>
<ul class="child-menu" role="menu">
<li class=" firstli " id="layout_10" role="presentation">
<a aria-labelledby="layout_10" href="http://localhost:8080/web/guest/members" role="menuitem">Members</a>
</li>
<li class=" lastli" id="layout_11" role="presentation">
<a aria-labelledby="layout_11" href="http://localhost:8080/web/guest/about-us" role="menuitem">About Us</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
生成html的 freemarker template 是：
<nav class="${nav_css_class}" id="navigation" role="navigation">
<ul aria-label="<@liferay.language key="site-pages" />" role="menubar">
<#assign parentfirst=true/>
<#list nav_items as nav_item>
<#assign nav_item_attr_has_popup = "" />
<#assign nav_item_attr_selected = "" />
<#assign nav_item_css_class = "" />
<#if nav_item.isSelected()>
<#assign nav_item_attr_has_popup = "aria-haspopup='true'" />
<#assign nav_item_attr_selected = "aria-selected='true'" />
<#assign nav_item_css_class = "selected" />
</#if>
<#assign nav_item_parent_first_css = ""/>
<#assign nav_item_parent_last_css = ""/>
<#if parentfirst>
<#assign parentfirst=false/>
<#assign nav_item_parent_first_css = "firstli"/>
</#if>
<#if !(nav_item_has_next)>
<#assign nav_item_parent_last_css = "lastli"/>
</#if>
<li ${nav_item_attr_selected} class="${nav_item_css_class} ${nav_item_parent_first_css} ${nav_item_parent_last_css}" id="layout_${nav_item.getLayoutId()}" role="presentation">
<a aria-labelledby="layout_${nav_item.getLayoutId()}" ${nav_item_attr_has_popup} href="${nav_item.getURL()}" ${nav_item.getTarget()} role="menuitem"><span>${nav_item.icon()} ${nav_item.getName()}</span></a>
<#if nav_item.hasChildren()>
<ul class="child-menu" role="menu">
<#assign i = 0/>
<#list nav_item.getChildren() as nav_child>
<#assign nav_child_attr_selected = "" />
<#assign nav_child_css_class = "" />
<#if nav_item.isSelected()>
<#assign nav_child_attr_selected = "aria-selected='true'" />
<#assign nav_child_css_class = "selected" />
</#if>
<#assign nav_item_child_first_css = ""/>
<#assign nav_item_child_last_css = ""/>
<#if (i == 0)>
<#assign nav_item_child_first_css = "firstli"/>
</#if>
<#if (!(nav_child_has_next) && (i > 0))>
<#assign nav_item_child_last_css = "lastli"/>
</#if>
<li ${nav_child_attr_selected} class="${nav_child_css_class} ${nav_item_child_first_css} ${nav_item_child_last_css}" id="layout_${nav_child.getLayoutId()}" role="presentation">
<a aria-labelledby="layout_${nav_child.getLayoutId()}" href="${nav_child.getURL()}" ${nav_child.getTarget()} role="menuitem">${nav_child.getName()}</a>
</li>
<#assign i = i + 1/>
</#list>
</ul>
</#if>
</li>
</#list>
</ul>
</nav>
css 是：
ul{
list-style-type:none;
padding:0;
margin:0;
}
div#topmenu-position{
height:31px;
padding:0;
position:relative;
z-index:3;
}
div#topmenu-position ul{
display:table;
width:919px;
table-layout:auto;
margin-left:0px;
}
div#topmenu-position ul li{
border-right:1px solid #0a6aa7;
border-left:1px solid #199fd1;
display:table-cell;
width:0%;
overflow:hidden;
margin-bottom:0;
}
div#topmenu-position ul li.firstli{
background-image:url('@theme_image_path@/topmenu-firstli.jpg');
background-repeat:no-repeat;
background-position:top left;
padding-left:5px;
border-left:medium none;
margin-left:0;
}
div#topmenu-position ul li.firstli:hover{
background-position:0px -31px;
}
div#topmenu-position ul li.lastli{
background-image:url('@theme_image_path@/topmenu-lastli.jpg');
background-repeat:no-repeat;
background-position:top right;
padding-right:5px;
border-right:medium none;
}
div#topmenu-position ul li.lastli:hover{
background-position:right -31px;
}
div#topmenu-position ul li a{
font-family:/*"Gill Sans",*/ "Gill Sans MT", Helvetica, Arial, sans-serif;
color:#FFF;
text-transform:uppercase;
font-size:14px;
font-weight:normal;
line-height:31px;height:31px;
display:block;
background-image:url('@theme_image_path@/topmenu-bg.jpg');
background-repeat:repeat-x;
background-position:top left;
text-align:center;
}
div#topmenu-position ul li ul{
display:none;
z-index:10;
position:absolute;
margin-left:-1px;
background-position:bottom left;
background-repeat:no-repeat;
background-image:url('@theme_image_path@/submenu-bg.png');
width:236px;
padding-left:1px;
padding-right:6px;
padding-bottom:18px;
}
div#topmenu-position ul li:hover ul li a, div#topmenu-position ul li.firstli ul li a, div#topmenu-position ul li.lastli ul li a, div#topmenu-position ul li ul li a{
text-decoration:none;
text-transform:none;
background-image:url('@theme_image_path@/leftmenu-arrow.png');
background-position:0px 12px;
background-repeat:no-repeat;
border-bottom:1px dashed silver;
text-align:left;
display:block;
color:#7E7C7D;
padding:8px 0 8px 10px;
line-height:15px;
height:auto;
}
div#topmenu-position ul li ul li{
background-color:transparent;
width:210px;
display:block;
height:auto;
padding:0 10px
;margin:0;
border:medium none;
}
其他css似乎应用正常，但部分div#topmenu-position ul li:hover ul li a, div#topmenu-position ul li.firstli ul li a, div#topmenu-position ul li.lastli ul li a, div#topmenu-position ul li ul li a未应用。我没有在chrome开发人员工具的样式选项卡上看到这种特殊样式。我似乎无法弄清楚可能导致这个问题的原因。也许我的CSS有些问题？
我正在使用 Alloy UI 与 Liferay ，它还会动态生成许多其他css。
答案 0 :(得分：1)
只需添加此css
即可 div#topmenu-position ul li:hover ul {
display: block;
}
或者您也可以尝试
div#topmenu-position ul li:hover ul {
display: block !important;
}
这是fiddle
答案 1 :(得分：0)
根据建议，我添加了
部分div#topmenu-position ul li:hover ul {
display: block;
}
但仍然不适合我。
然后再次在 css 部分
div#topmenu-position ul li{
border-right:1px solid #0a6aa7;
border-left:1px solid #199fd1;
display:table-cell;
width:0%;
overflow:hidden;
margin-bottom:0;
}
当我删除overflow:hidden;并清理Liferay主题项目并重新编译时，它可以正常工作。
奇怪的是，同样的属性在纯粹的 HTML / CSS 演示中保持完整，就像海报@Love Trivedi在他的小提琴中一样，它仍然有效。就在Liferay主题项目中，它没有用。