html - Dropdown not working on navigation menu -
html - Dropdown not working on navigation menu -
when hover on top level navigation menu, don't kid level menus.
the html construction of nested navigation menu retrieved browser view source looks 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 generates 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 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 = 0/> <#list nav_item.getchildren() 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 = + 1/> </#list> </ul> </#if> </li> </#list> </ul> </nav> and 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 applying fine 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 not applied. , don't see particular style on styles tab of chrome developer tool. cannot seem figure out might causing problem. perhaps problem in css?
i using alloy ui liferay , generates lots of other css on fly.
just add together css
div#topmenu-position ul li:hover ul { display: block; } or can seek
div#topmenu-position ul li:hover ul { display: block !important; } here fiddle
html css freemarker menubar liferay-theme
Comments
Post a Comment