если чуть немного изменить CSS чтобы получилось вот так
#category ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none; // Убираем картинку-стрелку и блокируем вывод метки ;
}
#category {
margin: 0px;
width: 178px; // Ширина внутреннего контента блока, можно поставить 100% ;
}
#category li a {
text-decoration: none;
}
#category li li a:link, #category li a:visited {
background: url("../image/menu9.gif") repeat scroll 0 0 transparent; // для подкатегории Картинка когда курсор не наведён ;
color: #fff;height:32px; // Цвет шрифта не активный и высота выводимой картинки ;
display: block;
padding: 0 0 0 32px;
}
#category li a:link, #category li a:visited {
background: url("../image/menu9.gif") repeat scroll 0 -32px transparent; // Картинка когда курсор не наведён ;
color: #fff;height:32px; // Цвет шрифта не активный и высота выводимой картинки ;
display: block;
padding: 0 0 0 32px;
}
#category ul li li a:hover {
background: url("../image/menu9.gif") repeat scroll 0 -32px transparent; // для подкатегории Картинка при наведённом курсоре сдвинута по вертикали на 32 пикселя;
color: #000;height:32px;
padding: 0 0 0 32px;
}
#category ul li a:hover {
background: url("../image/menu9.gif") repeat scroll 0 0 transparent; // Картинка при наведённом курсоре сдвинута по вертикали на 32 пикселя;
color: #000;height:32px;
padding: 0 0 0 32px;
}
то мы получим другой цвет подкатегории визуально так перестают сливаться категория и подкатегория