When I hover over the top level navigation menu, I don't get the child level menus.
The HTML structure of my nested navigation menu as retrieved from the browser view source looks like below.
<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>
The freemarker template that generates the html is:
<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>
And the css is:
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;
}
The other css seems to be applying fine but the portion 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 does not get applied. And I don't see this particular style on the Styles tab of chrome developer tool. I cannot seem to figure out what might be causing this problem. Perhaps some problem in my css?
I am using Alloy UI with Liferay and it also generates lots of other css on the fly.
As suggested I added the section
div#topmenu-position ul li:hover ul {
display: block;
}
But still did not work for me.
Then again, in the css section
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;
}
when I removed the overflow:hidden; and cleaned the Liferay theme project and recompiled, it worked.
It is strange that the same property when kept intact in the pure HTML/CSS demo as the poster @Love Trivedi had in his fiddle, it still worked. Just in the Liferay theme project it did not work.