Responsive Mobile Friendly Dropdown Menu in Pure CSS
Here I am going to share a simple dropdown navigation menu made with CSS Only coded by Andor Nagy. If you don’t want to use any third party plugin to create dropdown menu then this code snippet written for you in purely CSS only. It create fully responsive menu for your website without javascript. Dropdowns are marked with a plus sign ( + ) when ever you resize the screen you’ll see the new look if the screen is smaller then 768px.
Integrate Responsive Mobile Friendly Dropdown Menu
HTML
Create a native navigation menu with simple nested unordered list, Dropdowns are marked with a plus sign ( + ), If you click the same dropdown will display.
CSS
Now use following CSS to make your drowdown actionable and when ever you resize the screen you’ll see the new look if the screen is smaller then 768px.
nav { margin: 0; padding: 0; background-color: #254441; } #logo { display: block; padding: 0 30px; float: left; font-size: 20px; line-height: 60px; } nav:after { content: ""; display: table; clear: both; } nav ul { float: right; padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { margin: 0px; display: inline-block; float: left; background-color: #254441; } nav a { display: block; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; } nav ul li ul li:hover { background: #000000; } nav a:hover { background-color: #000000; } nav ul ul { display: none; position: absolute; top: 60px; } nav ul li:hover > ul { display: inherit; } nav ul ul li { width: 170px; float: none; display: list-item; position: relative; } nav ul ul ul li { position: relative; top: -60px; left: 170px; } li > a:after { content: ' +'; } |
See live demo and download source code.
