How to expand a list item in the mobile browser?

I have the following navbar on my site:

<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 real estate, in the web browser, when you hover over the mouse, the list item options are expanded.

However, when accessed by the mobile browser, they do not expand. After all, the cell phone only gives me the option to click and not the on: hover option.

How can I use the same current layout and expand the list items by clicking on the properties option when I use the mobile browser?