How to Make Drop-Down Navigation Menu Bar Using HTML, CSS
Blogger Leb
November 08, 2020
0
The dropdown navigation menu bar is one of the main lessons on the website which basically helps to enhance the beauty and quality of the website. If you want to learn web design or build a website, learning how to create a menu bar is very important for you. In this article, I will guide you completely on how you can create a drop-down menu using only simple HTML, CSS programming language. If you want to add this menu to your website or your blog, you can do it nicely. Below are all the instructions and details on how to add. You can learn how to make it by following this method and add it to your own project. Hope you like this navigation menu bar.
Some special information about this dropdown menu bar
📌 This menu bar I created using only simple HTML and CSS programming code.
📌 While trying to make it, I tried to write the code as simple as possible. So that programmers of all levels can understand and learn.
📌 In this article, I have shown you how to create a menu and submenu under that menu.
📌 I used a beautiful picture in the background of this menu bar. You may omit this image if you wish to use it on your website or blog.
📌 Dropdown menus have added a hover effect, meaning that the menus will change color when you move the mouse over them.
📌 Normally the menus are blackened and the submenus are whitened. When you hover the mouse over it, both the menu and the submenu will change color and turn green. Which can be seen very nicely and clearly on a black and white background.
📌 The notable point of this menu bar is that I have used a logo on every menu. I've used icons for things that menus indicate. As a result, the menus are more beautiful and clear.
All in all, this is a great menu bar that will undoubtedly help you to increase your programming knowledge and enhance the quality and beauty of your website.
Below is the code required to create this menu. You can download all the necessary code by clicking on the download button below. You can also see the live demo in this dropdown menu bar by clicking the demo button below. Hope you like it and are willing to learn how I made it.
You can learn how to create a menu on this web from the video below. In the video, I have completely guided and shown how to make it very easy and step by step.
Hopefully from another video, you have learned how to make it. Below I have given the necessary code you can download them.
How To Make This Dropdown Menu Bar
To create a menu bar on this, you first need to create an HTML and CSS file. You need to open Notepad or any other text editor on your computer to create HTML files. Then copy and paste the structure below into that editor. Then you can add dot HTML with the rename of your choice and save it.
Now you create a CSS file. In the same way, you open Notepad and save it without typing anything. When saving, rename to your liking and add dot CSS to it and save. Be sure to attach your CSS file to your HTML file with the following code.
ADD HTML Code(<body> Add Code</body>)
The following codes are the HTML codes that have been used the most to create this dropdown menu. Copy the HTML codes from the bottom and paste them in the upper structure where the ad HTML code is written. If you want to add to your website or blog. For that, you paste these codes in the body tags of your project.
The code below is the CSS code that has been used to create the style or design of this dropdown menu bar. You copy the codes to add them to your project. Then go to the CSS file you created and paste it and save the CSS file. Be sure to attach the CSS file to your HTML file. If you want to add it to another of your projects, copy the code below and paste it into the style tags in the head tags of that project.
*{
margin: 0;
padding: 0;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
html{-webkit-font-smoothing:antialiased;}
a{
color: #ba0707;
text-decoration: none;
}
a:hover{
color: #ba0707;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
body{
background: #e5e5e5;
color: #374147;
font: 14px"open sans","helvetica";
background-image: url("img.jpg");
background-size: cover;
height: 470px;
background-repeat: no-repeat;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
nav {
display: block;
background: #374147;
}
.menu {
display: block;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuli {
display: inline-block;
position: relative;
z-index: 100;
}
.menuli:first-child {
margin-left: 0;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menulia {
font-weight: 600;
text-decoration: none;
padding: 20px15px;
display: block;
color: #fff;
transition: all0.2sease-in-out0s;
}
.menulia:hover,
.menuli:hover > a {
color: #fff;
background: #20df49;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuul {
visibility: hidden;
opacity: 0;
margin: 0;
padding: 0;
width: 170px;
position: absolute;
left: 0px;
background: #fff;
z-index: 99;
transform: translate(0, 20px);
transition: all0.2sease-out;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuul:after {
bottom: 100%;
left: 20%;
border: solidtransparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuulli {
display: block;
float: none;
background: none;
margin: 0;
padding: 0;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuullia {
font-size: 12px;
font-weight: normal;
display: block;
color: #797979;
background: #fff;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuullia:hover,
.menuulli:hover > a {
background: #38d829;
color: #fff;
}
.menuli:hover > ul {
visibility: visible;
opacity: 1;
transform: translate(0, 0);
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuulul {
left: 169px;
top: 0px;
visibility: hidden;
opacity: 0;
transform: translate(20px, 20px);
transition: all0.2sease-out;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuulul:after {
left: -6px;
top: 10%;
border: solidtransparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 6px;
margin-top: -6px;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.menuli > ulul:hover {
visibility: visible;
opacity: 1;
transform: translate(0, 0);
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
.responsive-menu {
display: none;
width: 100%;
padding: 20px15px;
background: #374147;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.responsive-menu:hover {
background: #374147;
color: #fff;
text-decoration: none;
}
/*display: none;width: 100%;padding: 20px 15px;background: #374147;color: #fff;text-transform: uppercase;font-weight: 600;*/
a.homer {
background: #9ca3da;
}
Hopefully, you have nicely added the above two methods i.e. HTML and CSS code to your project. If you use those two methods, you can make it beautiful.
Hopefully from the above article, you have fully learned how I created the menu bar on this dropdown. If you have any problems while creating this project or you have any questions about this project, you can comment.
![Make Racing Car Game [Using JavaScript Code Only]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrVmbtoZxLonUlDyWpFe9gEe9Z1b2zrrfm4i5dwOqw2YQ41SElTjXTvhWSxHTwMQBmWmFMoKTSxUtGc3hAjOh6T-8jMXBlvbXOnaGHq8RP74rRlg4mPR4EuER3Yhb5My-reWpoARLnS8/w680/Make+Racing+Car+Game+%255BUsing+JavaScript+Code+Only%255D.jpg)
