0

这就是问题的样子： 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;
}

我已经把这个问题搞了几个小时了。请帮我解决这个问题。谢谢！

4

1 回答 1

0

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

问题是下拉菜单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可用于下拉菜单项的“定义定义”（ ）标签。

这样，菜单标题与菜单项位于同一元素内。< dd>相对定位而不是绝对定位，并且根本不要定位dtordd标签。然后菜单标题和菜单项将是相同的宽度，并且父项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>
于 2013-08-31T19:06:03.690 回答