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

我只是添加width: 100%到#menu ul lidiv id，通过设置为 100% 它将适应另一行中最长的文本。

于 2012-10-25T05:07:44.977 回答
0

请试试这个：

我们可以将每个 li 位置的宽度设置为 100%。

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