하이퍼 링크가 여러 줄로 줄 바꿈을 요구하는 CSS 드롭 다운 메뉴가 있습니다.
여기에서 볼 수 있도록 CSS와 마크 업을 맨손으로 제거했습니다.
<ul id="topnav" class="sf-menu">
<li id="menu-item-190"><a href="#">Menu Item</a>
<ul class="sub-menu">
<li id="menu-item-297"><a href="#">Sub Menu Item 1</a></li>
<li id="menu-item-315"><a href="#">b dfgbfgbdbg bgfdb</a></li>
<li id="menu-item-344"><a href="#">bfgf fgdgdf bgfb</a></li>
<li id="menu-item-436"><a href="#">Hfgbfggfdfb</a></li>
<li id="menu-item-561"><a href="#">dbgd</a></li>
<li id="menu-item-564"><a href="#">bggf fbggf fgbdfbdf</a></li>
<li id="menu-item-571"><a href="#">fgb fdbg bfgbdf</a></li>
<li id="menu-item-574"><a href="#">kuyvkuycs ukygo guyh oiuhyoi uih sds</a></li>
<li id="menu-item-577"><a href="#">sdcdsd dsdscsdsdc</a></li>
</ul>
</li>
.sf-menu {
list-style: none;
}
.sf-menu li {
position: relative;
float: left;
border: 1px solid grey;
padding: 5px;
}
.sf-menu ul {
list-style: none;
position: absolute;
top: -999em;
padding: 0px;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
top: 100%;
}
다음은 문제를 보여주는 jsFiddle입니다. http://jsfiddle.net/nA7Jf/
일반적으로 나는 목록 요소에 float left를 사용하지 않을 것이지만, 불행히도 이것은 워드 프레스 테마이고 너무 많이 변경하고 싶지 않습니다.
링크 텍스트가 래핑되지 않도록 방지하는 방법을 알아 내면 맞춤 CSS로 추가 할 수 있습니다.
추가 white-space: nowrap;및 제거 float하위 메뉴의 대한 li의 것은 충분하다 :
.sf-menu .sub-menu li {
white-space: nowrap;
float: none;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다