html - 突出显示 "full width avaialble"到列表项

Question

我正在为一家小型律师事务所开发网站。在侧面菜单中，我试图突出显示“当前页面”。我试过改变 LI 的背景，但这并不能解决问题；列表项没有扩展到菜单的整个宽度，所以看起来很糟糕。

Here's a jsfiddle .我希望黄色部分像粉红色部分一样突出显示:填满整个垂直和水平空间，而不仅仅是突出显示文本。

关于如何做到这一点有什么建议吗？我已经在 html 中包含了样式标签，显然，当它完成时，我真正的解决方案会有点不同。但在弄清楚如何以某种方式突出显示整行之前，我无法继续前进。

Answer 1

一个小问题:您在布局中混合了 em 和 px 单位。这使得在尝试使事情对齐时变得更加困难。

我已经使用 .selected 类实现了它，该类将应用于所选元素，以及作为子菜单项的元素的特殊情况:

.selected
{
    display: block;
    background-color:  #FCFFEE;
    width: 15.4em;
    margin-left: -0.6em;
    padding-left: 0.6em;
}

.subMenuItem.selected
{
    display: block;
    background-color:  #FCFFEE;
    width: 13.4em;
    margin-left: -2.6em;
    padding-left: 2.6em;
}

还有一个 jsFiddle 分支，您的原始版本经过更改:http://jsfiddle.net/CkKc7/2/ .

祝你好运。