Wayfinder и css

Добрый день! Совсем недавно начал изучение modx и столкнулся с непонятной для меня проблемой - никак не удается настроить меню сайта. Код меню:
<div id="menu">
<div>
<ul>
<li class="category first"><a href="index.html" title="Главная" img src="">Главная</a></li>
<li class="category "><a href="/news.html" title="Новости">Новости</a></li>
<li class="category "><a href="/products.html" title="Продукция">Продукция</a></li>
<li class="category "><a href="/price.html" title="Стоимость">Стоимость</a></li>
<li class="category "><a href="/contacts.html" title="Контакты">Контакты</a></li>
<li class="category last"><a href="/company.html" title="О компании">О компании</a></li>
</ul>
</div>
</div>

CSS для меню:
#menu{
width:100%;
height:0px;
background: #ffffff;
font: 8pt ’Verdana’;
}
#menu div {
width: 720px;
margin:auto;
}
#menu ul li {
margin: 0px;
padding: 0px;
list-style:none;
position: relative;
float: left;
width:120px;
display: block;
text-align: center;
font-weight:normal;
}
#menu ul li.firstcategory:hover, #menu ul li.firstcategory.over {
color: #fff;
background-image: url(../images/8-1.png);
}
#menu ul li.category:hover, #menu ul li.category.over {
color: #fff;
background-image: url(../images/7-1.png);
}
#menu ul li.lastcategory:hover, #menu ul li.lastcategory.over {
color: #fff;
background-image: url(../images/8-1.png);
}
#menu li.active a {
color: #000;
width: 120px;
display: block;
}
#menu li a, #menu li.over a {
color: #fff;
width: 120px;
display: block;
}
/* Styles for Menu Items */
#menu ul li.firstcategory {
font-weight: normal;
height: 23px;
line-height: 30px;
padding-right: 0px;
padding-left: 0px;
background-image: url(../images/8-1.png);
background-repeat: no-repeat;
background-position: 0px;
margin: 0px;
}
#menu ul li.category {
font-weight: normal;
height: 23px;
line-height: 30px;
padding-right: 0px;
padding-left: 0px;
background-image: url(../images/8-1.png);
background-repeat: no-repeat;
background-position: 0px;
margin: 0px;
}
#menu ul li.lastcategory {
font-weight: normal;
height: 23px;
line-height: 30px;
padding-right: 0px;
padding-left: 0px;
background-image: url(../images/8-1.png);
background-repeat: no-repeat;
background-position: 0px;
margin: 0px;
}
#menu ul li.active {
font-weight: normal;
height: 23px;
line-height: 30px;
padding-right: 0px;
padding-left: 0px;
background-image: url(../images/7-1.png);
background-repeat: no-repeat;
margin: 0px;
}

Суть проблемы в том что никак не удается отобразить класс "category"

*wall*
хз, что у тя там творится - дай ссылку на саму страницу или дай ее полный архив

попробуйте
#menu ul li.category.first
и дальше по аналогии.

И почему все любят громоздить тучу лишнего кода?

почему бы не оформить меню как:
<ul class="topmenu">
<li><a href>.....

</ul>

а css писать ?

.topmenu LI
.topmenu LI A
.topmenu LI LI
.topmenu LI LI A
.topmenu LI .active A
.topmenu LI UL
и так далее
и с шаблонами возиться не надо и все просто и понятно

@Paprikas
ты что-то такое сакраментальное написал, что даже я невкурил
#menu ul li.category.first - в данной верстке это не указывает ни на один элемент

@dmi3y

ну впринципе ты прав, KISS, но это медленно работает, и надо это понимать

Конечно самый правильный вариант - добавить класс для ul.
И переписать абракадабру на ul.category li.last

@Masterkey_SCR
Чем вас смущает мое правило?

а фиг его знает, что смутило, наверное то что надо было еще и хтмл код привести, а на существующем коде этот идентификатор бы не отработал
да и вот такая структура, без вложений мне кажется перегруженной ненужными классами
<div id="menu">
<ul>
<li class="category">
<a class="first"></a>
<a></a>
</li>
</ul>
</div>

И можно узнать почему бы не работал?

PS. Еще меня смущает в первом пункте меню вот это - img src=""

@Paprikas
даа, это жестяк, но тс видать забил

Ну, выложенные им стили как оказалось, половина не используется вообще.

А по поводу правила Вы так и не ответили, почему правило li.first.category не будет работать с хтмл
<li class="first category">
м?

Просто может я чего-то не знаю.