My issue arises when attempting to display the child level menus upon hovering over the top level navigation menu.
The structure of my nested navigation menu, as seen in the browser view source, is outlined below:
<div id="topmenu-position">
<nav class="sort-pages modify-pages" id="navigation" role="navigation">
<ul aria-label="Site Pages" role="menubar">
...
</ul>
</nav>
</div>
The freemarker template responsible for generating this HTML is shown here:
<nav class="${nav_css_class}" id="navigation" role="navigation">
<ul aria-label="<@liferay.language key="site-pages" />" role="menubar">
...
</ul>
</nav>
As for the CSS styling, some rules are not being applied correctly, specifically
div#topmenu-position ul li:hover ul li aThis problem occurs within an environment using Alloy UI with Liferay, which generates additional dynamic CSS styles.