0

絶対配置や JS を使用せずに、単純な HTML+CSS メニューを作成しようとしています。私の問題は、現在選択されているアイテムを展開するか、それを置き換えるサブメニューに関するものです。

サブメニューの問題

HTML は簡単です。

<ul id="menu">
    <li>Item 1</li>
    <li>Folder 1
    <ul>
        <li>Item 2</li>
    </ul>
    </li>
    <li>Item 3</li>
</ul>

CSSも同様です：

#menu, #menu ul {
    border-style: solid;
    border-width: 0px;
    border-top-width: 1px;
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 180px;
}

#menu li ul {
    background-color: cyan;
    display: none;
    position: relative;
    right: -168px;
    width: auto;
}

#menu li:hover ul {
    display: block;
}

#menu li {
    border-style: solid;
    border-width: 1px;
    border-top-width: 0px;
    padding: 10px;
}

#menu li:hover {
    background-color: lightgrey;
    font-weight: bold;
}

サブメニューは再配置された後にのみレイアウトに影響を与えると思っていましたが、ここではそうではないようです. 私は少し途方に暮れています。

4

2 に答える 2

2

このタイプのメニュー パターンを使用する場合は、サブメニューposition:relativeの親と子メニューで使用する必要があります。を使用すると、子要素をその親に対して相対的にレイアウト フローの外側に表示できます。LIposition:absoluteUL

位置以外のすべてのスタイリングをAそれぞれのタグ内に置きLI、 を使用することもお勧めしますdisplay:block。これがないと、"Folder 1" のテキストのスタイルを設定するのは困難です。

簡単な例: http://jsfiddle.net/Diodeus/jejNy/127/

于 2013-08-09T19:42:10.827 に答える