Witam. Krótko, zwięźle i na temat powiem w czym rzecz

Jest taka strona

http://sklep.kfd.pl/

a w niej menu podzielone ładnie na kategorie/producenci, po kliknięciu np. na producenci menu zmienia swoją zawartość. Patrząc w kod źródłowy, menu jest zrobione NIEPOPRAWNIE semantycznie... są tam divy, tabelki, spany itd. Czy uważacie, że da się coś takiego zrobić w definition lists (dl dt dd)? Jak ugryźć ten temat od strony CSS? Próbowałem zrobić coś takiego:

[HTML] pobierz, plaintext 
<dl id="menu">
<dt class="kategorie"></dt>
                    <dd><a href="#">kategoria</a></dd>
                    <dd><a href="#">kategoria</a></dd>
                    <dd><a href="#">kategoria</a></dd>
                    <dd><a href="#">kategoria</a></dd>
 
<dt class="producenci"></dt>
                    <dd><a href="#">kategoria</a></dd>
                    <dd><a href="#">kategoria</a></dd>
                    <dd><a href="#">kategoria</a></dd>
                    <dd><a href="#">kategoria</a></dd>
</dl>
[HTML] pobierz, plaintext 

Ale nie wiem jak to oprogramować w CSS, żeby wyglądało tak jak wyżej. Próbowałem dla dt dać float: left i dla określonych dd display: none, ale nie trzyma się to ładu i składu, nie wiem po prostu czy opłaca się męczyć z czymś takim. A może lepiej dać dwie listy ul ?Jedna z podziałem na kategorie/producenci a druga po prostu na pozycje w menu, a w zależności od wybrania opcji z pierwszej listy będzie dynamicznie aktualizowana ta druga.

Czy ktoś ma jakieś sugestie? Będę wdzięczny za pomoc

No jasne, że lepiej zrobić to za pomocą list UL, po to zostały stworzone. A definition lists jak sama nazwa wskazuje jest do definicji