Question

我一直在为此苦苦挣扎，所以会感激一些帮助。

修改

我已经尝试了下面的答案，但似乎我的其他一些CSS导致它无法正常工作。谁能告诉我需要改变什么？谢谢！ http://jsfiddle.net/tnuF8/3/

我有一个下拉菜单，我设法让每个下拉菜单成为该菜单中最长链接的width。我的问题是较短的链接不是菜单的整个宽度，所以当鼠标不在链接文本上时，不要响应点击或翻转。

有没有办法可以展开<a>和<li>（我不确定<li>是否已经在扩展）以便所有链接都是完整的宽度？

我认为我遇到的问题是在css中width 100%没有考虑边框，填充等等。<ul>上的填充很重要，因为网站背景是相同的颜色作为悬停，我希望菜单上的填充/边框将它们分开。

HTML：

<div id="nav" style="position: relative; float: right;">
    <ul id="ddmenu">
        <li>
            <a href="#">Company</a>
            <ul class="sub-menu">
                <li><a class="sub-link" href="#">Something</a></li>
                <li><a class="sub-link" href="#">Short</a></li>
                <li><a class="sub-link" href="#">Something Long</a></li>
            </ul>
        </li>
    </ul>
</div>

的CSS：

#nav ul.sub-menu {
    padding: 12px 5px 5px 5px;
}

#nav ul.sub-menu li a
{
    display: inline-block;
}

#nav ul.sub-menu li
{
    display: inline-block;
    white-space: nowrap;
    width: inherit;
}

#nav ul li a:hover
{
    color: #000;
    background-color: rgb(244, 244, 244);
}

非常感谢你的帮助:)。

Answer 1

#nav ul.sub-menu li a
{
    display: block;
}
#nav ul.sub-menu li
{
    display: block; // actually the default value
    white-space: nowrap;
    width: inherit;
}

http://jsfiddle.net/mblase75/tnuF8/

<强>更新

此外，删除以下样式：

#nav ul.sub-menu li
{
    display: block;
    white-space: nowrap;
/*  width: inherit;*/
}
#ddmenu li a {
    display: block;
/*  float: left;*/
}

http://jsfiddle.net/mblase75/h3NAt/

如何扩展<a> and <li> to fit the width of the <ul> using css? (or even jquery)</ul></li></a>

1 个答案: