Question

这就是问题所在：http://parnu.webweaver.ee/

子菜单字太长，看起来都很奇怪。我该如何解决这个问题？这是我的CSS：

/*navigation styles
*/
nav
{
    background: url(../images/bg_footer.png);
}

nav#mainNav ul, nav#mainNav ul li
{
    margin: 0px;
}

nav#mainNav ul li
{
    display: inline;
    float: left;
    position: relative;
}

nav#mainNav ul li a
{
    display: inline-block;
    line-height: 49px;
    padding: 0 14px;
    color: rgb(245,233,227);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.08em;
}

nav#mainNav ul li a:hover
{
    border-bottom: none;
    background: rgb(186,230,78);
    cursor: pointer;
}

/*sub menu*/
nav#mainNav ul ul
{
    position: absolute;
    z-index: 999;
    background: url(../images/bg_footer.png);
    min-width: 100%;
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

nav#mainNav ul ul li
{
    float: none;
    display: list-item;
    font-size: .9em;
    width: 100%;
}

nav#mainNav ul ul li a
{
    display: block;
    line-height: 35px;
    text-transform: none;
}

我几个小时都在搞乱这个问题。请帮我解决这个问题。谢谢！

Answer 1

我猜你希望菜单“按钮”与下拉部分的宽度相同，对吗？

问题是下拉列表ul绝对定位，因此父li未考虑其尺寸。

目前你正在这样做：

<div class="sixteen columns">
    <ul>
        <li>
            <a href="#" style="display:inline-block; position:relative;">Dropdown Menu Header</a>
            <ul style="display:block; position:absolute;">
                <li>Dropdown Item 1</li>
                <li>Dropdown Item 2</li>
                <li>Dropdown Item 3</li>
            </ul>
        </li>
    </ul>
</div>

不使用下拉列表的无序列表，而是使用定义列表（dl）。这有“定义标题”（dt）标签，可用于下拉菜单标题，“定义标识”（dd）标签可用于下拉菜单项。

这样，菜单标题里面与菜单项相同的元素。定位＆lt; dd＆gt; 相对而非绝对，并且根本不会定位dt或dd标记。然后菜单标题和菜单项的宽度将相同，父li将根据宽度进行扩展。

像这样：

<div class="sixteen columns"> <ul> <li> <dl style="display:block; position:relative;"> <dt>Dropdown Menu Header</dt> <dd>Dropdown Item 1</dd> <dd>Dropdown Item 2</dd> <dd>Dropdown Item 3</dd> </dl> </li> </ul> </div>

主导航项目不如子菜单项宽

1 个答案: