Background: I'm building a typical css menu that works perfectly fine as a prototype, however, I am now adding in the additional visual details.
Problem: I'm hoping to code these up using just CSS and markup to allow for menus to be created & edited in the underlying CMS. The problem (as you can see by looking at the image) is that there is a small detail centered on the bottom border on each button when it is in the active state (the home button in the screenshot).
I haven't yet spent much time in prototyping this though I have considered a number of options and was hoping that someone else had already implemented something like this... so far I've considered using a set of divs and background images, however, that will make the underlying markup all sorts of complex.
Finally, as is the way of these things, I also need it to look good in IE.
I don't think you can achieve this is CSS alone.
If your building in PHP you could use a statement at the top of each page to say which page it is.
< ?php $page="home"; ?>
Then on each of the buttons test to see if that button should be active and if so add an id to the css.
< a href="http://www.something.co.uk/" < ?php if ($page=="home") echo " id=\"active\""; ?>>home< /a>
If you're building you menu using a
<a> structure you should have enough markup to achieve that effect.
For example, setting the whole background of your menu on the
<ul>, with little right and left margin for the borders to not overlap with the first and last items.
<a> is displayed as a block, you'll have to add an :hover state that change their background image to your hover state (in repeat-x), the lightner one on your screenshot.
And then, you create a .selected class to apply to the current selected
<li>. You set the background of the
<li> in repeat-x to the darker background on your screenshot.
And you add to the
li.selected a a background image representing the tiny detail, centered, at the bottom. It should overlap the
<li> and blend in it.
But, as stated above, you should have a way to figure out what is the current selected page, using either back- or front-end scripting to add the .selected class to the correct