Меню на css3

Доброго времени суток, коллеги!
Подскажите как сделать меню на сайте со следующей структурой:

<ul id="menu">
<li><a href="/">Главная</a></li>

<li>
<a href="">Категории</a> <!-- Не получается сделать тут -->
<ul>
<li><a href="">CSS</a></li>
<li><a href="">Графический дизайн</a></li>
<li><a href="">Инструментарий</a></li>
<li><a href="">Веб дизайн</a></li>
</ul>
</li>
<li><a href="">Проекты</a></li>
<li><a href="">О нас</a></li>
<li><a href="">Контакты</a></li>
</ul>

На текущий момент я яспользую следующую конструкцию:

<insert name="show_block"
module="menu" id="1"
tag_level_start_1="[nav id='mainmenu'][ul id='menu']"
tag_level_start_2="[li][ul]"
tag_start_1="[li]"
tag_end_1="[/li]"
tag_level_end_1="[/ul][/nav]"
tag_level_end_2="[/ul][/li]"
>
Проблема в том, что система выводит подменю в виде <li>Наименование пп меню</li><li><ul><li>Подменю</li><ul></li>
Т.е. другими словами наименование меню оказыватся без текста, а следовательно 1px в ширину, что не хорошо при организации выпадающего меню средствами css3