Create Responsive DropDown Menu Using JQuery | HTML, CSS & JavaScript
In this tutorial, we will learn how to make the responsive dropdown menu using jquery, HTML, CSS. You can see screenshot how the result ll display after using this code.
1. Desktop View
2. Mobile View
HTML File
Responsive Drop-down Navigation
CSS File
html { font-family:Verdana, Arial, Helvetica, sans-serif; } body { margin: 0; padding: 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: 20px; } 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; } }