3

私はこのjsfiddleのようなCSSメニューを構築しています: http://jsfiddle.net/YXT7j/48/

HTML:

<ul id="nav">
<li><a>item 1</a>
    <ul class="sub" style="width: 200px;">
        <li><a>item 1.1</a>
            <ul>
                <li><a>item 1.1.1</a></li>
                <li><a>item 1.1.2</a></li>
                <li><a>item 1.1.3</a></li>
            </ul>
        </li>
        <li><a>item 1.2</a>
            <ul>
                <li><a>item 1.1.1</a></li>
                <li><a>item 1.1.2</a></li>
                <li><a>item 1.1.3</a></li>
            </ul>           
        </li>
    </ul>
</li>
<li><a>item 2</a>
    <ul class="sub">
        <li><a>item 2.1</a></li>
        <li><a>item 2.2</a></li>
        <li><a>item 2.3</a></li>
    </ul>  
</li>
<li><a>item 3</a>
    <ul class="sub">
        <li><a>item 3.1</a></li>
        <li><a>item 3.2</a></li>
        <li><a>item 3.3</a></li>
    </ul>  
</li>
</ul>

CSS:

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;
}
.sub>li {
    float: left; 
    width: 100px;        
}
#nav>li:hover .sub {
    display: block;
}

</p>

項目 1 の下に、2 つのリストが隣り合っていることがわかります。また、html にはインライン幅が設定されています。インライン幅 (またはそれに相当する CSS) がない場合、リストは隣同士ではなく下に表示されます ( http://jsfiddle.net/YXT7j/34/ )。

サブメニュー内のリストの数が動的になりました。そのため、CSS で幅を設定できず、現在はインライン スタイル (100*numlists+'px') を使用しています。しかし、それはただ醜いです。他の要素と同様に、サブメニューをその子のサイズに合わせてサイズ変更したいと思います。残念ながら、幅を設定しないと、サブメニューは代わりにその親メニュー項目の幅に従います。

tl/dr: ul.sub に明示的な幅を設定せずにhttp://jsfiddle.net/YXT7j/48/を取得するにはどうすればよいですか。

ありがとう！

4

2 に答える 2

5

これは私のソリューションの js-fiddle です: http://jsfiddle.net/YXT7j/66/

サブメニューのリストをフローティングではなく、インライン ブロックにする必要があります。次に、インライン項目を空白でラップしないようにサブメニューに指示します。

これは、他の問題について以前に見たのと同様の答えです。これらの答えは、完全なブロック要素ではなく、テキスト (標準はインライン) の折り返しを防ぐことでした。

したがって、完全を期すために、コードは次のとおりです。

<ul id="nav">
    <li><a>item 1</a>
        <ul class="sub multi">
            <li><a>item 1.1</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>
            </li>
            <li><a>item 1.2</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>           
            </li>
        </ul>
    </li>
    <li><a>item 2</a>
        <ul class="sub">
            <li><a>item 2.1</a></li>
            <li><a>item 2.2</a></li>
            <li><a>item 2.3</a></li>
        </ul>  
    </li>
    <li><a>item 3</a>
        <ul class="sub">
            <li><a>item 3.1</a></li>
            <li><a>item 3.2</a></li>
            <li><a>item 3.3</a></li>
        </ul>  
    </li>
</ul>
​

</p> 

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;

    white-space: nowrap;
}
.sub>li {
    width: 100px;   
}
.multi.sub>li { 
    display: inline-block;
}
#nav>li:hover .sub {
    display: block;
}

</p>

于 2012-10-30T12:33:27.380 に答える
2

より良い答えを待つ間、ハックな解決策はこれを行うことです:

#nav>li:hover .sub {
    display: block;
    width:1000%;
}

http://jsfiddle.net/YXT7j/39/

于 2012-10-29T13:24:16.543 に答える