Как убрать эффект всплывающего меню при наведении мышкой?

Добрый день.

Столкнулась с такой проблемой в шаблоне:

У меня на сайте есть меню в шапке. Оно с подкатегориями, и при наведении мышки, они всплывают.
Но вот мне не нравится одно...Навожу курсор на категорию (к примеру Новости), перезагружаю страницу, не убирая курсор с той самой категории. Страница обновилась, а подменю категории открыто! Навожу на другие категории, но ничего не уходит. То есть подменю Новостей не реагирует на то, что я указываю мышкой на категорию Спорт))
Помогает только перезагрузка страницы.


Может совсем убрать эффект всплывающего подменю при наведении курсора? Просто обойтись нажатием на категорию, а там и подкатегории откроются.

Спасибо

/* MENU
----------------------------------------------- */
.show-menu {display:none;}
.main-menu li {display:inline-block; border-left:1px solid #2C6AAE; margin-right:-3px; position:relative;}
.main-menu li a {display:block; line-height:50px; padding:0 20px; color:#fff; font-size:12px; text-transform:uppercase; font-weight:bold;}
.main-menu li a {display:inline-block; line-height:50px; padding:0 15px; color:#FFF; font-size:13px; font-weight:bold;}
.main-menu li a:hover, .menuactive {background-color:#2c6aae;}
.hidden-menu { background-color:#2C6AAE; width: 230px; top: 50px; left: 0; position: absolute; z-index: 9999; display: none; 
box-shadow:0 10px 20px 0px rgba(0,0,0,0.3);}
.hidden-menu li, .hidden-menu li a {display:block; text-align:left; font-size:12px !important; color:#fff; line-height:35px; }
.hidden-menu li {border-bottom:1px solid #4A84C4; margin-right:0;}
.hidden-menu li a:hover {background-color:#4A84C4;} 
.submenu:before { top: 50%; right: 3px; border: solid transparent; content: " "; height: 0; width: 0; 
position: absolute; pointer-events: none; margin-top:-1px;
border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 4px;}