[laimas]

Вы можете помочь мне исправить это?

У меня есть работа оплачиваемая, ради спортивного интереса я ее бросать не буду. )

Я могу сказать о генеральном направлении:

1) Выбросить имеющееся меню вместе с кодом, ибо в нем, мягко говоря, безобразие.
2) Взять меню по ссылке, тем более что это урок расписанный.
3) В меню своем (в шаблоне) это:
<div class="toggleMenu"><span></span><span></span><span></span></div>
пока заменить на:
<input type="checkbox" id="menu" class="toggleMenu">
<label for="menu" class="toggleMenu">≡</label>
3) Чтобы иметь такую же структуру меню как и по ссылке, достаточно выполнить небольшой js-код:

$(function() {
    $('ul.navv a.arrow').each(function(i, e) {
        $(e).removeAttr('href')
            .before('<input type="checkbox" class="toggleSubmenu" id="sub'+i+'">')
            .after('<label for="sub'+i+'" class="toggleSubmenu">'+e.textContent+'</label>')
    });
});

и ваше меню будет работать чисто на CSS как и по ссылке. Здесь у ссылок раскрывающих меню атрибут href удаляется вообще, безобразия бессмысленного unbind().bind() не требуется и отменять действие по умолчанию тоже. Но также будут оставаться раскрытыми ранее раскрытые разделы. Можно заменить type="checkbox" на type="radio" и тогда ранее раскрытый раздел будет скрываться. Но при этом нельзя будет закрыть раскрытый раздел повторным нажатием на кнопку. Поэтому флажки и добавить небольшой обработчик который будет закрывать ранее раскрытое. А вот должен ли он влиять на поведение только в горизонтальном меню, или в мобильном тоже, это не мне решать, так что пока код этого обработчика можно не приводить. Тем более, что в исходном состоянии разделы в горизонтальном меню будут раскрываться по наведению мыши.

Все, а далее только CSS править под свое. Пробуйте, а чтобы в горизонтальном меню раскрывалось по щелчку, потребуется немного не так модифицировать a.arrow, и немного изменить CSS.

Можете не на сайте тренироваться, а на простом html файле, в котором подключить и jQuery.