If you want to download the source code then click here
Hello friends, hope you are doing very well, I’m creating a header navigation bar with a submenu dropdown when you hover over the specific link using only HTML and CSS. the best part is you can integrate just a few minutes because I’m not using any plugins or script or no dependency so that’s why this navbar is easy to integrate. I hope you love this video tutorial.
Below I’ve attached the basic structure of HTML. i’m not using any of third party script, or plugins it is pure html and css code. just you can now you can copy the code and past your onw index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar With Dropdown Using HTML and CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
/* YOUR INTERNAL STYLE HERE */
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
color: #42424A;
}
</style>
</head>
<body>
<!-- HTML CODE GOES HERE -->
</body>
</html>Below I have attached a link to more useful videos, which you will get to learn a lot from them.
You also might like this video
- Scroll To Top Button (Back To Top) Using Simple JAVASCRIPT | Click to Scroll Top | CSS Smooth Scroll
- Profile Card UI Design Using HTML & CSS | CSS Flip Hover Effect & Dark Light Mode | Figma UI Design
- Show hide text on click using HTML, CSS & JQUERY | Expand & Collapse Text | Jquery Toggle Class
- Menu Hover Effect | Infinite Wavy Border Animation Using Only HTML, CSS ANIMATION
- Testimonial Carousel With Slick Carousel, Review Slider | HTML,CSS & JQUERY TUTORIAL
Navigation bar with submenu dropdown using html and css
Also i have added video tutorial you can watch how it works and learn it your self. below also i have attached source code you can download and use your personal project or implement to your own projects. and i have show all the code in this post you can see.
<main>
<header>
<div class="logo">
<a href="#"><img src="images/logo.png" alt=""></a>
</div>
<nav>
<ul>
<li><a href="#">Feature</a>
<ul class="submenu">
<li><a href="#">Material</a></li>
<li><a href="#">Cost Effective</a></li>
<li><a href="#">Color Combination</a></li>
<li><a href="#">Nearby Location</a></li>
</ul>
</li>
<li><a href="#">Product</a>
<ul class="submenu">
<li><a href="#">Beds</a></li>
<li><a href="#">Chairs</a></li>
<li><a href="#">Cebinets</a></li>
<li><a href="#">Desk & Table</a></li>
<li><a href="#">Bookcase</a></li>
</ul>
</li>
<li><a href="#">Store</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Review</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="hero_sec">
<img src="images/herobg.png" alt="">
</section>
</main>As you can see above HTML code. first you will see the main tag, then header inside logo div and navigation menu. navigation menu structure is ul li > ul li. coz i have a submenu so that why i am using the same tag insde ul li. you can just copy and past the code your index or header file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body{
font-family: 'Oswald', sans-serif;
overflow-x: hidden;
color: #42424A;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 249px;
border-bottom: 1px solid #dbdbdb;
}
header ul li{
display: inline-block;
list-style: none;
margin: 0 30px;
}
header ul li:last-child{
margin-right: 0;
}
header ul li a{
text-decoration: none;
color: #42424a;
padding: 22px 0;
display: inline-block;
transition: all ease 0.3s;
font-size: 18px;
}
header ul li a:hover{
color: #ff8a00;
}
/* submenu style */
header ul .submenu{
position: absolute;
width: 200px;
background-color: #ffffff;
box-shadow: 0 20px 45px #00000020;
margin-top: -50px;
opacity: 0;
z-index: -999;
transition: all ease 0.5s;
}
header ul li:hover .submenu{
z-index: 99;
opacity: 1;
margin-top: 0;
}
header ul .submenu li{
margin: 0;
width: 100%;
}
header ul .submenu li a{
padding: 15px 20px;
display: inline-block;
width: 100%;
}
.hero_sec{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}As you can see above the code, let’s see the header css style in display flex and center all sides, then submenu style the main tag position relative and inside ul tag position is absolute, the all the style put here you can see and copy that.
Finally i want to say all of you to thanks for watching my video and website. i have added the video tutorial on our youtube channel and you must have got to learn something new. So you must share it and subscribe to my LearnDesign youtube channel so that you can get updates of my upcoming videos. thanks for your time.
