0

MAIN にマウスオーバーするとサブメニューが表示されますが、サブメニューは行のフル表示ではありません。MAIN 1 の下にある「SUB 1」を行全体に表示するにはどうすればよいですか？

別のメインのサブメニューは短いテキストにする必要があるため、幅を設定したくありません。

HTML

<ul id="menu">
            <li><a href="#" title="MAIN 1">MAIN 1</a>
                <ul>
                    <li><a href="#" title="SUB 1">SUB 1</a></li>
                    <li><a href="#" title="SUB 1 XXXX XXXXX SUB 1">SUB 1 XXXX XXXXX SUB 1</a></li>
                </ul>
            </li>
            <li><a href="#" title="MAIN 2">MAIN 2</a></li>
            <li><a href="#" title="MAIN 1">MAIN 3</a>
                <ul>
                    <li><a href="#" title="SUB 3">SUB 3 XXXX</a></li>
                    <li><a href="#" title="SUB 3 XXXX SUB 1">SUB 3 XXXX</a></li>
                </ul>
            </li>

CSS

#menu{margin:0;padding:0;list-style:none;}
#menu li{float:left;display:block;background:#ccc;position:relative;z-index:500;margin:0 1px;}
#menu li a{display:block;padding:4px 8px 0 8px;font-weight:700;height:23px;text-decoration:none;color:#4C4C4C;}
#menu li a:hover{color:#ffaa00;}
#menu a.selected{color:#f00;}
#menu ul{position:absolute;left:0;display:none;margin:0 0 0 -1px;padding:0;list-style:none;background-color:#000000}
#menu ul li{white-space:nowrap;float:left;border-top:1px solid #fff;}
#menu ul a{display:block;height:15px;padding:8px 5px;color:#666;text-align:left;}
#menu ul a:hover{text-decoration:underline;}
*html #menu ul{margin:0 0 0 -2px;}

Javascript

$('#menu li').hover(
                function () {
                    //show its submenu
                    $('ul', this).slideDown(100);

                },
                function () {
                    //hide its submenu
                    $('ul', this).slideUp(100);            
                }
            );

http://jsfiddle.net/Dgaxh/

4

2 に答える 2

3

ほら、JSFiddle

div id に追加width: 100%しただけです#menu ul li。100% に設定すると、別の行からの最長のテキストに対応します。

于 2012-10-25T05:07:44.977 に答える
0

これを試してください：

各 li 位置の幅 100% を設定できます。

#menu li ul li {min-width:100%}
于 2012-10-25T05:10:27.150 に答える