3

ハイパーリンクが複数の行に折り返されることを主張する 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 でリンク テキストを追加できるように、リンク テキストが折り返されないようにする方法を見つけ出す必要があります。

4

1 に答える 1