Зачем Вам новое меню? При скролле добавляйте новый класс своему меню, исключайте его из потока с использованием fixed, а чтобы при этом контент не уезжал на высоту меню наверх — используйте margin-top.
А уж в новом классе переопределяйте свое меню как хотите, хоть внешний вид, хоть некоторые пункты скрывайте.
Вот пример писал для подобного вопроса. codepen.io/iiil/pen/InDbp
Используйте тот же hover, но на jquery - по хаверу присваивайте класс active пункту меню.
А так - не советую использовать hover для такой важной вещи, как меню. Используйте hover как вспомогательное средство, как основное - click.
Для исключения Вашей проблемы сходу в голову приходит такой вариант: при хавере присваивайте какой-нибудь переменной значение false и запускайте таймаут на время работы анимации. После выполнения таймаута присваивайте этой переменной true. Соответственно, при хавере проверяйте значение переменной, и если она false - не обрабатывайте событие hover.
Сделать советую так:
ну адаптивность делается через медиа-запросы, если ты копируешь шаблон, то это уже сделано за тебя.
Выезжающее меню - самый простой способ, на мой взгляд, убирать класс у этого дива:
Совет следующий: в джумле можно подключать несколько тем на один сайт. Возьмите бесплатную тему с похожим на нужное меню, и начинайте по порядку разбираться. Помочь Вам в отрыве от реальной ситуации сложно, да и не хочется. Но делать стоит именно так, раз не знаете php и прочего, что нужно. Потом тему с сайта можно будет удалить.
А если разрабатываете на локалке, так вообще можно поставить себе другой сайт с каким-нибудь готовым сайтом (их в сети великое множество)