0
상위 레벨 탐색 메뉴 위로 마우스를 가져 가면 하위 수준 메뉴가 표시되지 않습니다.탐색 메뉴에서 드롭 다운이 작동하지 않습니다.
HTMLbrowser 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('@[email protected]/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('@[email protected]/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('@[email protected]/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('@[email protected]/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('@[email protected]/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 적용되지 않습니다. 크롬 개발자 도구의 스타일 탭 에이 특정 스타일이 표시되지 않습니다. 나는이 문제의 원인이 무엇인지 알 수 없다. 내 CSS에 아마 어떤 문제가 있습니까?
나는 을 Liferay와 합금 UI을 사용하고 있으며 또한 즉시 다른 CSS를 많이 생성합니다.
그것은 수수께끼에서 작동하는 것처럼 보입니다. 평범한 HTML과 CSS로 작업하면 효과가 있습니다. 이 AUI Liferay 테마 프로젝트 전체에서 작동하지 않습니다. – SASM
나에게 정보를 제공 할 수 있습니까 –
로컬 개발 컴퓨터에서 작업하기 때문에 현재로서는 불가능합니다. – SASM