1

cssを使用した単純なサブメニューがあり、構造は順序付けられていないリストであり、表示を「ブロック」に変更することでホバー状態で表示されます。

<ul>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li>
        <a href="#">item with submenu</a>
        <ul class="submenu">
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </li>
</ul>

そしてcss：

.submenu {
    display: none;
    position: absolute;
}

ul li:hover>ul.submenu {
    display: block;
}

ここで例を見ることができます：http： //jsfiddle.net/Y2vgj/

そしてここに： http： //tinkerbin.com/9TXjbi8c

（両方のリンクで同じです）

さて、私がやろうとしているのは、ページが小さすぎて完全に表示できない場合に、サブメニューを反対方向に展開することです。誰かがそれを手伝ってくれますか？

4

1 に答える 1

0

サブメニュー li に次のスタイルを追加します。

.submenu li {
    float: none;
    width: 150px;
    list-style-type: none;
    display: inline;
}

余白と幅を調整して、適切な位置に配置します。上記の変更により、それらは水平に表示されます。

于 2012-11-02T12:16:44.597 に答える