ps_mainmenu Help

[feho1]

Hi everyone first of all i am not sure if this is the right place to create this topic if it is not please move it to right place or let me know where to open.
Second i am very new to prestashop so be nice :)
I am using prestashop 1.7.6.4 and module main menu v2.1.1 by PrestaShop
my question:
1. My main menu has categories and everything when i hover it show the sub menu and the sub category which is fine, my question is can i add hover effect to sub category, i have sub category that has sub categories so level 1, level 2 and level 3. Can i hide the level 3 without user hovering  similar to picture below?
2. also how can add arrows to the sub categories that has sub categories like in the picture below?
3. any other free menu module that you can suggest that would make my life easier ?

"

The ps_mainmenu.tpl

{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
      <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {foreach from=$nodes item=node}
            <li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-xl-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>
              {if $node.children|count}
              <div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                {menu nodes=$node.children depth=$node.depth parent=$node}
              </div>
              {/if}
            </li>
        {/foreach}
      </ul>
    {/if}
{/function}

<div class="menu col-lg-12 col-md-12 js-top-menu position-static hidden-lg-down" id="_desktop_top_menu">
    {menu nodes=$menu.children}
    <div class="clearfix"></div>
</div>

Thanks in advance