Dropdown menu - transform <ul><li> into <select><option>

Question

I’d like to put up the menu dropdown on my site when choosing variations. Both on mobile and computer.

I found this article teaching to do, but in the script I could not properly replace the terms of CSS and HTML.

The script I used: https://css-tricks.com/convert-menu-to-dropdown/

Site with dropdown template: https://www.madrugaosuplementos.com.br/100-whey-protein-2270g-optimum-nutrition-multishaker-gratis/

My website: https://www.imperiodosuplemento.com/molho-de-tomate-grape-organico-todos-os-sabores-lergurme

The script I’m adapting for my website:

<script type="text/javascript">
// Create the dropdown base
$("<ul />").appendTo("atributo-comum");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "SELECIONE..."
}).appendTo("atributo-comum ul");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});
</script>

Someone can help me make it work?

Answer 1

But do you need jquery to get the dropdown effect? Only media query (css) solves your problem;

Your layout breaks at 768px, need to change the layout of the elements at this point:

@media screen and (min-width: 768px) .menu.superior. { /.../
}