If you look here you'll see that I have graphic separators on my left and right navigation lists which look just like I want.
http://www.springfieldmo.gov/newsite/jello.html Does anyone know the correct approach, or if it's possible without an additional image, to correct for the comment below? Essentially, I'd like the hover color to only show up above the separator line so the graphic separator still shows on mouse over. If I mess with the height on the "hover" then the menu jiggles around when moused over. On 7/10/08 1:45 PM, "Gene" wrote: > It looks odd that in the left column the bottom line disappears when > mousing over an item. My CSS for the navigation list is: /* local navigation column and link stylings*/ .navLocal ul, ul.related{margin:0; padding:0; list-style-type:none; } ul.related {margin: 0 2px 0 -11px; } .navLocal li a {background:url(images/localNavSeparator.gif) -18px 100% no-repeat; } .navLocal li a, ul.related li a {display:block; text-decoration:none; color:rgb(87,49,16); padding:4px 8px 8px 10px;} ul.related li a {padding-left: 21px; background:url(images/localNavSeparator.gif) 50% 100% no-repeat;} .navLocal li li a{display:block; background:url(images/localNavSeparator.gif) 85% 100% no-repeat; padding:4px 8px 8px 20px; color:rgb(34,43,106);} .navLocal a:hover, .related a:hover {text-decoration:underline; background:#fff; } ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
