Как сделать чтоб меню выпадало и закрывалось по клику без js

Нужно чтобы меню выпадало по клику и закрывалось по клику без использования javascript

ul.ddropdownn li {/* Считаем координаты относительно исходного места. */ position: relative;
     }
ul.ddropdownn, ul.ddropdownn-inside {
    /* Отступы на нуле. */
    padding: 0;
    /* Маркеры уберем. */
    list-style-type: none;
    
    }
ul.ddropdownn-inside {
    /* Спрячем дочерние элементы выпадающего списка. */
    left: -9999px;
    position: absolute;
    display: none;
    
    }
ul.ddropdownn li.ddropdownn-top {
    /* Небольшой отступ. */
    margin: 0 1px 0 0;
    /* Выравнивание по левой стороне. */
    float: left;
    display: inline;
    }
ul.ddropdownn li.ddropdownn-top a {
    /* Делаю элементы блочными. */
    display: block;
    /* Снова отступы. */
    padding: 3px 10px 4px;
    
    }
ul.ddropdownn a.ddropdownn-top {/* Цвет фона. */ background: #EB796F; }
ul.ddropdownn a.ddropdownn-top:hover {/* Отступы. */ padding: 3px 10px 4px; }
ul.ddropdownn li.ddropdownn-top:hover .ddropdownn-inside {
    left: 0;
    /* Делаю элементы блочными. */
    display: block;
    
    }
ul.ddropdownn .ddropdownn-inside {/* Цвет фона. */ background: #EB796F; }
ul.ddropdownn .ddropdownn-inside a:hover {/* Цвет фона изменится при наведении. */ background: #EEA390; }

Html

<ul class="ddropdownn">
        
    <li class="ddropdownn-top">
    <a class="ddropdownn-top" href="#">Menu</a>
            <ul class="ddropdownn-inside">
                <li><a href="{% url 'about' %}">About</a></li>
                <li><a href="{% url 'logout' %}">Logout</a></li>
                
                <li><a href="https://forms.yandex.ru/cloud/6170f0b40208c60589a01c66/">Support</a></li>
                
                
            </ul>
        </li>
</ul>