Want to create a dropdown menu with only HTML & CSS? Solution: Pure CSS Dropdown Menu With Submenu,Simple HTML CSS Menu with Multi Submenu.
I am sure that you know what is a dropdown menu, A drop–down menu is a list of links or items that appear whenever the button is clicked or hovered on. Every website use dropdown menu, this the best way to organize listing by category.
Today you will learn to create a drop-down menu using only HTML & CSS. This post is very useful if you are learning HTML CSS, I mean if you are a beginner in web design or development. You can use this on your next or current program after some modification. I am sure you will definitely able to create a pure CSS menu after seeing this post.
So, Today I am sharing Pure CSS Dropdown Menu With Submenu, A simple HTML CSS Menu with Drop-Down feature. This has also submenus, you can place more just copy and paste the same format I have created the present submenus. Previously I have shared the same type of Dropdown menu in the earlier day you can check out that here.
If you are thinking now how this HTML CSS Dropdown Menu actually is, then see the preview given below.
Preview Of HTML Drop-Down Menu
See this video preview to getting an idea of how this dropdown menubar looks like.
Now you can see this visually. If you like this then get the source code of its.
You May Also Like:
- CSS Stylish Checkbox
- Animated Newsletter Signup Form
- HTML CSS Glitch Effect
- Text Animate & Divide On Scroll
Pure CSS Dropdown Menu With Submenu Source Code
As always before sharing source code, let’s talk about it. As you can see in preview this is a simple dropdown menu with pure CSS, if you want a responsive one then check out this Responsive Navbar. I have created HTML list with <ul> and <li> for creating this menu, I have multi-time used these tags to create submenus.
For creating the icons which are after every dropdown list, I have used CSS Unicode icons (see list). In this menu, all works are done by CSS :hover property. First I place all list in their position using postion: property. At first, I just hide all the submenus and dropdown listing, they all will visible on the mouse hover.
There is nothing to explain all are these very easy to understand, you will understand easily after getting the codes. For creating this drop-down menu you have to create only 2 files, One for HTML, & one for CSS. Follow these steps to creating this without any error.
index.html
Create an HTML file named ‘index.html’ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Pure CSS DropDown Menu</title> <link href="https://fonts.googleapis.com/css?family=Quicksand|Russo+One&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Web Design</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">Web Development</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">Node JS</a></li> <li><a href="#">Advance JS</a> <ul> <li><a href="#">Angular</a></li> <li><a href="#">VUE</a></li> <li><a href="#">React</a> <ul> <li><a href="#">React Native</a></li> <li><a href="#">React JS</a></li> <li><a href="#">Material Design</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Graphic Design</a> <ul> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Adobe XD</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> <h1>Simple <span>CSS</span> DropDown Menu</h1> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ body { background: #212121; font-size:22px; line-height: 32px; color: #ffffff; word-wrap:break-word !important; font-family: 'Quicksand', sans-serif; margin: 0; padding: 0; } h1 { font-size: 60px; text-align: center; color: #FFF; margin-top: 150px; font-family: 'Russo One', sans-serif; } h1 span { color: #FF4649; } #container { margin: 0 auto; } nav { margin: 35px 0; background-color: #FF4649; } nav ul { padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { display:inline-block; background-color: #FF4649; } nav a { display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; } nav a:hover { background-color: #333; } nav ul ul { display: none; position: absolute; top: 60px; } nav ul li:hover > ul { display:inherit; } nav ul ul li { width:230px; float:none; display:list-item; position: relative; } nav ul ul ul li { position: relative; top:-60px; left:230px; } nav ul ul li { border: 1px solid white; } li > a:after { content: ' ▼'; } li > a:only-child:after { content: ''; } |
That’s It. Now you have successfully created a Pure CSS Dropdown Menu With Submenu. In other words, Simple HTML CSS Menu with Drop Down Listing. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Hei hei Shaan,
I’m in a group of what we call savers group. We save money and loan ourselves at the rate of 10%. We currently use books but I’ve been thinking going digital. There’s something I’ve created for myself but I’m thinking of including the whole group would benefit. Problem is, when I click a different members name it’s not giving a members details other than the names, ID# and phone #. What should I do. Program is in excel
Hi
Thanks for this code! it is helping with dealing with IE 11 not liking submenus. My only concern is, how to make it responsive?
I am using it in wordpress and would like it to reduce to the 3bars on say a phone.. any idea?
Thanks
hey, sorry I just saw the link in the text! Thanks!
Thanks Shaan .. this is pretty nice , and just what I have been looking for but not abel to cope myself ..
Thanks for sharing with us … greetings Otto
Super elegant, I added a fade-in, also only css for a nice feel. Like this:
nav ul ul{
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.2s;
display: none;
position: absolute;
border-top: 1px solid #aaa;
top: 35px;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}