Home/ Questions/Q 4096794
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T20:05:31+00:00

I’m working on a website for a small law office. In the side-menu, I’m

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    enter image description here

    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.

    • 0