Изменить выпадающее меню с наведения на щелчок

Question

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

Как изменить код, чтобы выпадающее меню было видно только при нажатии на него?

            <li class="dropup">
                <a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown"><span class="menu-icon fas fa-bars"></span>More</a>
                    <ul class="dropup-content" style="right: 10px;bottom: 70px">
                        <li><a href="#">{lang:"core","usermenu_favorites"}</a></li>
                        <li><a href="#">{lang:"core","usermenu_visitors"}</a></li>
                    </ul>
            </li>

и CSS:

    .dropup {
    position: relative;
    display: inline-block;
    }

    .dropup-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    bottom: 50px;
    z-index: 1;
    }

    .dropup-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    }

    .dropup-content a:hover {background-color: #ccc}

    .dropup:hover .dropup-content {
    display: block;
    }

    .dropup:hover .dropbtn {
    background-color: #2980B9;
    }

Answer 1

вместо использования css: hover используйте javascript для добавления и удаления класса .hover к элементу .dropup-content при касании / щелчке элемента .dropdown-toggle.

.dropup-content {
    display: none;
    /* position: absolute; */
    background-color: #f1f1f1;
    min-width: 160px;
    bottom: 50px;
    z-index: 1;
}
.dropup-content.hover {
    display: block;
}