突出显示“全宽avaialble”到列表项 [英] Highlighting the "full width avaialble" to a list item

问题描述

我在一个小型律师事务所的网站上工作。在侧边选单中，我试图突出显示当前页面。我已经尝试改变李的背景，但这并不完全做的伎俩;列表项不会扩展到菜单的全宽，因此看起来很糟糕。

。

祝你好运。

I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.

Here's a jsfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.

Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.

解决方案

One little issue: you're mixing em and px units for layout. This makes it a lot harder when trying to make things line up.

I've implemented it using a .selected class that would be applied to the selected elements, and a special case for the elements which are sub-menu items:

.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;
}

And a jsFiddle fork of your original with the changes: http://jsfiddle.net/CkKc7/2/.

Good luck.

这篇关于突出显示“全宽avaialble”到列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！