Mobile Friendly Website


Doing it with style

CSS MENUSDivide and Conquer

Date : 24th August 2009

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

The divider problem

Vertical divide lines from previous links showing next to the :hover sliding doors graphic, spoiling the look of the menu

The fix

The vertical divide line is now covered by the sliding doors graphic giving a much better look to the menu.


I have seen this happening on several sites recently and think that the vertical divide line next to the button hover spoils the look of the menu, so with a fairly simple change of style this can be avoided.

All that is needed is to style the list element with display:inline; instead of float:left; (for IE6). Then add a negative 1 pixel left margin to the link and an extra 1px of padding to the <b> element to keep the menu the same width as in the previous version.

Now when hovering over the link, the sliding doors graphic is positoned left by 1 pixel and it covers the previous vertical divider graphic.

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page