This is fairly simple. You can use a border-left for the colored boxes with a background-position: left with an appropriate image to show that white gap between the colored box and the menu item. There might be other solutions too, though. This is just something I came up with off the top.
Just a usability/accessibility tip while you are at it - The hover state for the menu item which shows the yellow background is deceptive. Not all the area of the menu item is clickable. Only the link is. You should use a display: block; width: 100%; on the "a" element, and specify the width of the menu item in the ul's properties to get this functioning. On 2/9/06, Jackie Carey <[EMAIL PROTECTED]> wrote: > http://www.itshere.org.uk > > > > I've inherited this table-based site, which is going to be replaced with > a CMS-based site at some point in the next six months. I've worked > styles into some of it, and the rest can remain until the switch. > However, I am not happy with the menu and would like to replace it with > a list-based menu. > > > > This could be done very easily if it weren't for the coloured boxes > alongside the menu items. I'd like to keep them as they're part of the > branding and look quite nice. > > > > Does anyone know of a way I could do this, without a whole heap of work > (and ideally without Javascript). > > > > Thanks > > > > Jackie > > > > Scanned by MailDefender - managed email security from intY - > www.maildefender.net > ______________________________________________________________________ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 > List wiki/FAQ -- http://css-discuss.incutio.com/ > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Rakesh Pai Mumbai, India. [EMAIL PROTECTED] http://piecesofrakesh.blogspot.com/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
