Выпадающее меню CSS - перекрывающиеся элементы

Проблема заключается в этом классе, который применяется ко всем элементам меню:

#nav li.parent a span {
    margin-top: -10px;  /* This is what making them crowded */
}

Глядя на стиль меню нав, этот стиль должен применяться только к верхнему уровню li элементов (Пример категории, Family Tree, Браки), но она прикладывает все ваши a элементы.

Я бы изменил имя этого id на class (удалите "#nav li.parent a span" и замените на ". [Ваше имя класса здесь]", затем примените этот класс к элементам верхнего уровня li (Пример Категория, Семья Дерево, браки).

+ Изменить

<li class="level0 nav-1 level-top first parent hasProducts">

в

<li class="level0 nav-1 level-top first parent hasProducts [YOUR CLASS HERE]">

Затем в вашем CSS:

изменение

#nav li.parent a span {
    margin-top: -10px;
}

в

.[YOUR CLASS HERE]{
    margin-top:-10px;
}