как сделать выпадающее меню через js ?

#menu ul { display: none; }

#menu:hover ul { display: block; }
______

JS не используют для таких вещей. Разве что ради интереса / обучения.

P.s. мстю: переписывай вручную!)
.

Такое можно сделать на чистом CSS без использования многотонного JS кода

Держи, с любым вложением категорий меню https: //codepen.io/aleksanderdevelop/pen/YzKdxyr .
А выше г%внокода чет многовато.

Я когда еще был совсем новичком, на Jquery без особого труда сделал так. Заодно там и кнопка скрола наверх страницы
$(document).ready(function(){
$(window).scroll(function(){
if(window.scrollY>10)
{
$(".primer").css("display","inline");
}
else
{
$(".primer").css("display","none");
}
});
/*прокрутка*/
$("#menu_vyp").mouseover(function(){
$(".vipad").css("display","inline");
});
/*конец появления .vipad*/
$(".vipad").mouseover(function(){
$(this).css("display","inline");
});
/*мышка на меню - отображать*/
$(".vipad").mouseout(function(){
$(".vipad").css("display","none");
});
/*конец исчезновения .vipad*/
$(".m1").mouseover(function(){
$(this).css("background-image","url(min3.png)");
});
/*замена первой картинки*/
$(".m1").mouseout(function(){
$(this).css("background-image","url(min2.png)");
});
/*возврат первой картинки*/
$(".m2").mouseover(function(){
$(this).css("background-image","url(min5.png)");
});
/*замена второй картинки*/
$(".m2").mouseout(function(){
$(this).css("background-image","url(min4.png)");
});
/*возврат второй картинки*/
$(".m3").mouseover(function(){
$(this).css("background-image","url(min7.png)");
});
/*замена третьей картинки*/
$(".m3").mouseout(function(){
$(this).css("background-image","url(min6.png)");
});
/*возврат третьей картинки*/
$(".m4").mouseover(function(){
$(this).css("background-image","url(min9.png)");
});
/*замена четвертой картинки*/
$(".m4").mouseout(function(){
$(this).css("background-image","url(min8.png)");
});
/*возврат четвертой картинки*/
$(".m5").mouseover(function(){
$(this).css("background-image","url(min11.png)");
});
/*замена пятой картинки*/
$(".m5").mouseout(function(){
$(this).css("background-image","url(min10.png)");
});
/*возврат пятой картинки*/
$(".m6").mouseover(function(){
$(this).css("background-image","url(min13.png)");
});
/*замена шестой картинки*/
$(".m6").mouseout(function(){
$(this).css("background-image","url(min12.png)");
});
/*возврат шестой картинки*/
$(window).scroll(function() {
$(".vipad").css("display","none");
});
/*убрать меню при прокрутке*/
$(window).click(function() {
$(".vipad").css("display","none");
});
/*убрать меню при клике*/
});
/*конец ready*/