Выпадающий список не работает в меню навигации

Когда я нахожу курсор на меню навигации верхнего уровня, я не вижу меню дочернего уровня.

Структура 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&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;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&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;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&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;lmic-members" role="menuitem">LMIC Members</a>
                     </li>
                </ul>
            </li>
            <li class=" " id="layout_3" role="presentation">
                <a aria-labelledby="layout_3" href="http&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;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&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;add-biobanks" role="menuitem">Advisory Committee</a>
                    </li>
                </ul>
            </li>
            <li class=" " id="layout_4" role="presentation">
                <a aria-labelledby="layout_4" href="http&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;sample-collections" role="menuitem">
                    <span> Projects</span>
                </a>
            </li>
            <li class=" " id="layout_5" role="presentation">
                <a aria-labelledby="layout_5" href="http&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;samples" role="menuitem">
                    <span> Links</span>
                </a> </li>
            <li class=" " id="layout_6" role="presentation">
                <a aria-labelledby="layout_6" href="http&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;search" role="menuitem">
                    <span> Search</span>
                </a>
            </li>
            <li class=" lastli" id="layout_7" role="presentation">
                <a aria-labelledby="layout_7" href="http&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;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&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;members" role="menuitem">Members</a>
                    </li>
                    <li class=" lastli" id="layout_11" role="presentation">
                        <a aria-labelledby="layout_11" href="http&#x3a;&#x2f;&#x2f;localhost&#x3a;8080&#x2f;web&#x2f;guest&#x2f;about-us" role="menuitem">About Us</a>
                    </li>
                </ul>
            </li>
       </ul>
    </nav>
</div>

freemarker template, который генерирует HTML:

<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 на лету.