Проблема с выпадающим меню на мобильном

Здравствуйте. Столкнулся с проблемой.

Проблема с подкатегориями меню на телефоне.

В меню есть например категория новости, имеет подкатегорию. А эта подкатегория должна быть кликабельна и содержать в себе ещё категорию.

Сейчас получается так, что все видно.. а нужно чтобы при клике подкатегория открывалась а не была видна всегда.

Скрины прилаживаю с объяснением проблемы.

http://prntscr.com/rkpenb
http://prntscr.com/rkpeu6

Код css который отвечает за меню

/* mobile menu */
a#navtrigger,
a#navtrigger-sec{ display:block !important;}

.navhead{ position:relative !important; top:auto !important; left:auto !important; right:auto !important;padding:10px;}

#navigation{ display:none; height:660px; !important; position:fixed; width:100% !important;bottom:0px;top:0px; margin:0 0 0 0 !important; padding:0 0 0 0 !important; background-color:#ffffff !important;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px; border-top: none !important; }/*Выпадающее меню по кнопке сверху*/
#navigation a{ color:#000000 !important;}

#navigation a.searchOpen{ right:20px; top:20px;}

#navigation a:hover,
#navigation .current-menu-item>a{color:#f24110 !important; background:none;}

#default-nav > ul,
ul.nav,
#main-nav{ width:100% !important; margin:0 0 0 0 !important; padding:20px 0 0 0 !important;display: block; }/*display: block;*/

ul.nav li,
.nav li ul,
#main-nav li.mega ul.sub-menu { width:100% !important; background-color: transparent !important; border:none !important; float:none; display:block;margin:0 0 0 0 !important; position:relative !important; left:auto !important; display:block !important; visibility:visible !important; padding-top:0;}

#navigation .nav li ul li > a{ border:none; border-bottom:1px dotted #444 !important; text-align:left;}

ul.nav li a{ width:100% !important; text-align:left; padding:15px 20px !important; margin:0 0 0 0; font-size:16px !important;}

.nav li ul li > a {font-size: 13px !important;}

.nav li a.sf-with-ul {padding-right: 0 !important;}

#main-nav > li > a {margin: 0 0 0 0 !important;}

.nav > li > ul > li,
.nav li ul ul li,
#main-nav li ul li > a,
.nav li ul li > a {max-width: 100% !important;margin:0 0 0 0; padding:0 0 0 0;}

.nav li ul{ padding:0 20px;}
#main-nav li.mega ul.sub-menu {min-height:0px;}

.nav li ul ul{ margin:0 0 0 0; padding:0 0 0 0;}

div.sub,
.nav > li > ul:after,
.menu-item-has-children > a::after{ display:none !important;}

.sf-arrows .sf-with-ul::after { right: 15px;}

/* end mobile menu */