0

ドロップダウンの幅がこのように固定されている水平メニューをたくさん見てきましたhttp://www.dubspot.com/動作しますが…</p>

親のような論理的なサイズ、幅、またはそれ以上を作ろうとします。私のソリューションhttp://jsfiddle.net/m2ry3/ですが、少し不気味です（重複するとjQueryが使用されます）：

<ul>
<li><a href="#">very long item like this</a>
<ul>
    <li><a href="#">small item 1</a></li>
    <li><a href="#">small item 2</a></li>
    <li><a href="#">small item 3</a></li>
    <!--duplicate and hidden -->
    <li class="hack"><a href="#">very long item like this</a></li>
</ul>
</li>
<li><a href="#">small</a>
<ul>
    <li><a href="#">a long item 1</a></li>
    <li><a href="#">a various item 2</a></li>
    <li><a href="#">small 3</a></li>
</ul>
</li>


ul li{
    float:left;
}
ul li a{
    display:block;
    padding:10px;
    text-decoration:none;
    border:1px solid #eee;

}
ul ul{
 position:absolute;       
 background:#ddd;
 display:block;   
}

.hack{
visibility:hidden;
height:0;    
}
ul li ul li {
    display:block;  
    clear:both;
    width:100%;
}

jQueryでホバー効果を使用します（方法は知っています）。js (jQuery) なしで幅を調整することは可能ですか? またはCSSのヒントはありますか？

重複する li を使わないようにしていますが、li の外側の幅 (ボーダー、パディング) を扱うのは簡単ではありません…</p>

4

1 に答える 1

0

li の固定幅内でテキストを調整する場合は、css プロパティを使用できます -

ワードラップ: ブレークワード;

これにより、長いテキストを固定幅内に調整できます。

私はこれがあなたを助けると思う

于 2012-06-23T11:40:52.350 に答える