主导航项不如子菜单项宽答案

【问题标题】：Main navigation item not as wide as sub-menu item主导航项不如子菜单项宽
【发布时间】：2013-09-01 03:06:03
【问题描述】：

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

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

【问题讨论】：

标签： html css navigation width submenu

【解决方案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）标签。

这样，菜单标题在与菜单项相同的元素。定位 dd> 相对而不是绝对定位，并且根本不要定位 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>

【讨论】：