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

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

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

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

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

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

    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 */