How to expand a list item in mobile browser?

Question

I have the following navbar on my website:

<div class="navbar-custom">
        <div class="container">
            <div id="navigation">
                <!-- Navigation Menu-->
                <ul class="navigation-menu">

                    <li>
                        <a href="{{ route('main') }}">
                            <i class="fa fa-home"></i>Início
                        </a>
                    </li>

                    <li>
                        <a href="{{ route('institucional.index') }}">
                            <i class="fa fa-building"></i> Institucional</a>
                    </li>

                    <li>
                        <a href="{{ route('simulacoes.index') }}">
                            <i class="fa fa-calculator"></i> Simulações </a>
                    </li>

                    <li>
                        <a href="{{ route('slides.index') }}">
                            <i class="fa fa-image"></i> Slides</a>
                    </li>

                    <li class="has-submenu">
                        <a href="{{ route('ver-imoveis.index') }}">
                            <i class="fa fa-home"></i>Imóveis</a>
                        <ul class="submenu">
                            <li>
                                <a href="{{ route('ver-imoveis.index') }}">Ver imóveis</a>
                            </li>

                            <li>
                                <a href="{{ route('tipos.index') }}">Tipos</a>
                            </li>

                            <li>
                                <a href="{{ route('atributos.index') }}">Atributos</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="{{ route('servicos.index') }}">
                            <i class="fa fa-wrench" aria-hidden="true"></i>Serviços</a>
                    </li>

                    <li>
                        <a href="{{ route('depoimentos.index') }}">
                            <i class="fa fa-comments" aria-hidden="true"></i>Depoimentos</a>
                    </li>

                    <li>
                        <a href="{{ route('onde-estamos.index') }}">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>Onde Estamos</a>
                    </li>

                    <li>
                        <a href="{{ route('configuracoes.index') }}">
                            <i class="fa fa-cogs"></i>Configurações</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

In the real estate part, in the web browser, when hovering over, list item options are expanded.

However, when accessing through the mobile browser, they do not expand. After all, the phone only gives me the option to click and not the option on:Hover.

How I could use the same current layout and be able to expand the list items by clicking on the real estate option when I use the mobile browser?