Last night, I was in a “punchy” mood so I decided to roll out a new treatment of the headers and links on the sidebar of my site.
As you can see, I gave the headers of the sections a grey background, which provides more structure within the sidebar column. Each link item has the same “arrow” box treatment. When you hover over each link area, the hover state will display a light grey background. Each area uses the display:block CSS selector. However, the effect I really wanted to execute was that when you hover over any part of the block area, the link would be active. However, I had some troubles with the CSS and the padding/margin and it was super late last night, so I could not remedy the situation. So, the treatment sort of works.
I’m not sure if I’m fully wed to this treatment, but I figured I would kick the tires and see how I like it. I’ve been meaning to improve the sidebar since I re-designed the site over the holidays and I finally got around to testing something out.