Clickable Dropdown Menu with li and lu - css

Question

I was doing a menu in which the submenu option appears with hover. But this wasn't fine because I couldn't click the others option that are under the first.
So, I'm trying to create a Clickable Dropdown Menu and w3schools have a page where this is explained with divs but I'm doing this with <ul> and <li> and when I click on the <li> element where I put the onclick nothing happens.
So, is it impossible to do with <ul> and <li>? If yes, how?
<script type="text/javascript">
function myFunction() {
document.getElementById("primero").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<style type="text/css">
html, body {
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
}
.cabecera{
position: relative;
left:50%;
margin-left: -472.5px;
}
/* define a fixed width for the entire menu */
.navigation {
position: relative;
width: 20%;
overflow: hidden;
margin-left: 2%;
margin-top: 2%;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu, .submenu1 {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #3e8525;
text-decoration: none;
padding: 10px;
color: white;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #009e1a;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
/*.mainmenu li:hover .submenu {
display: block;
max-height: 1300px;
}
*/
.submenu li:hover .submenu1 {
display: block;
max-height: 1090px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #4ba22c;
padding-left:10%;
display: block;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #009e1a;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 1s ease-out;
display: none;
position: absolute;
}
.submenu1 a {
background-color: #52b130;
padding-left:20%;
}
/* hover behaviour for links inside .submenu */
.submenu1 a:hover {
background-color: #009e1a;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu1 {
overflow: hidden;
max-height: 0;
-webkit-transition: all 1s ease-out;
}
li{
border:1px solid green;
}
.show {display:block;}
#media screen and (max-width: 1000px) {
.cabecera{
position: relative;
left:2%;
margin-left: 0px;
}
}
#media screen and (max-width: 840px) {
.navigation {
position: relative;
width: 195px;
overflow: hidden;
margin-left: 2%;
margin-top: 2%;
}
}
</style>
<nav class="navigation">
<ul class="mainmenu">
<li>Alimentacion y bebidas
<ul class="submenu" id="primero">
<li>Alimentacion seca
<ul class="submenu1">
<li>aceites</li>
<li>cafes y sucedaneos</li>
<li>infusiones</li>
<li>chocolates</li>
<li>cacao</li>
<li>azucar y edulcorantes</li>
<li>golosinas</li>
<li>salsas</li>
<li>sal, vinagre y especieas</li>
<li>reposteria</li>
<li>galletas</li>
<li>CEREALES DESAYUNO</li>
<li>PASTELERÍA Y BOLLERÍA INDUSTRIAL</li>
<li>PANADERÍA INDUSTRIAL</li>
<li>PASTAS</li>
<li>ARROCES</li>
<li>LEGUMBRES SECAS</li>
<li>SOPAS, CALDOS Y PURES</li>
<li>APERITIVOS PAT.FRITAS CORTEZA</li>
<li>FR.SECOS Y FRUTA SECA</li>
<li>ALIMENTOS ANIMALES</li>
<li>ALIMENTOS DIETÉTICOS</li>
<li>PRODUCTOS NAVIDEÑOS</li>
<li>GENÉRICO A. SECA</li>
</ul>
</li>
<li>Conservas</li>
<li>Leches y Batidos</li>
<li>Bebidas</li>
</ul>
</li>
<li>Productos frescos</li>
<li>Drogueria y Perfumeria</li>
<li>Sector bebé</li>
<li>Sector textil</li>
<li>Deporte</li>
<li>Calzado</li>
<li>Ferreteria y bricolage</li>
<li>Recargas</li>
<li>Bazar</li>
<li>Productos Especiales</li>
<li>Servicios</li>
<li>Sin clasificacion definida</li>
</ul>
</nav>

Answer 1

Since you want to do it by clicking, doing this modifications to the submenu class helps:
.submenu {
-webkit-transition: all 1s ease-out;
display: none;
}
Also prevent to reload the page when clicking the link:
function myFunction(e) {
e.preventDefault();
document.getElementById("primero").classList.toggle("show");
}
and when you call it pass event
<li>Alimentacion y bebidas
take a look on this pen
with your code modified