Buen día, Soy nuevo jajaja, primero que todo yo busque en otras partes y encontré una forma de hacerlo, incluso el ejemplo lo complementa con responsive que es muy importante al hacer un menú. Primero el HTML <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="estilosmenu.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <title>menuresponsive</title> </head> <body> <nav> <div> <i class="material-icons">menu</i> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a> <ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> <li><a href="#">Product 4</a></li> </ul> </li> <li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a> <ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> <li><a href="#">Product 4</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">FAQ</a></li> </ul> </nav> <script type="text/javascript"> $("nav div").click(function (){ $("ul").slideToggle(); $("ul ul").css("display", "none"); }); $("ul li").click(function(){ $("ul ul").slideUp(); $(this).find('ul').slideToggle(); }); $(window).resize(function(){ if($(window).whidth() > 768) { $("ul").removeAttr('style'); } }); </script> </body> </html> Después el Css <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $("nav div").click(function (){ $("ul").slideToggle(); $("ul ul").css("display", "none"); }); $("ul li").click(function(){ $("ul ul").slideUp(); $(this).find('ul').slideToggle(); }); $(window).resize(function(){ if($(window).whidth() > 768) { $("ul").removeAttr('style'); } }); <!-- language: lang-css --> html { font-family: 'Poppins', sans-serif; } body { padding: 0; margin: 0; } ul { margin: 0; padding: 0; list-style-type: none; background: #e3e3e3; position: relative; } ul li { display: inline-block; } ul li a { color: #292929; text-decoration: none; padding: 15px; display: block; } ul li:hover { background: lightgrey; } ul ul { position: absolute; min-width: 200px; background: lightgrey; display: none; } ul ul li { display: block; background: #e3e3e3; } ul li:hover ul { display: block; } ul li i { color: #292929; float: right; padding-left: 5px; } nav div { background: lightgrey; color: #292929; font-size: 24px; padding: 0.6em; cursor: pointer; display: none; } @media(max-width: 768px) { nav div { display: block; } ul { display: none; position: static; background: #e3e3e3; } ul li { display: block; } ul ul { position: static; background: #e3e3e3; } } <!-- language: lang-html --> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="estilosmenu.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <title>menuresponsive</title> </head> <body> <nav> <div> <i class="material-icons">menu</i> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a> <ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> <li><a href="#">Product 4</a></li> </ul> </li> <li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a> <ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> <li><a href="#">Product 4</a></li> </ul> </li> <li><a href="#">About</a></li> <li><a href="#">FAQ</a></li> </ul> </nav> </body> </html> <!-- end snippet --> Listo si te das cuenta con esta estructura puedes modificar el tuyo, muy buen día, saludos desde Bogotá Colombia.