Dropdown Menu Bar with HTML and CSS

Hello readers, Today in this blog you'll learn how to create a Dropdown Menu Bar with HTML and CSS. Earlier I have shared many blogs on How to Create a Colorful Glowing Shadow Effect on Hover using HTML & CSS. And, now I'm going to create a Responsive Navigation Bar Using HTML & CSS.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program ( Dropdown Menu Bar with HTML and CSS).

Video Tutorial of Dropdown Menu Bar with HTML and CSS

As you have seen the pure Dropdown Menu Bar with HTML and CSS in the video. This Dropdown Menu Bar with HTML and CSS is very simple and easy to create. If you are a beginner and you know HTML & CSS then you can also create this type of Dropdown Menu Bar with HTML and CSS.

If you like this program ( Dropdown Menu Bar) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use these Dropdown Menu Bar on your websites, projects, and HTML pages.

Dropdown Menu Bar with HTML and CSS[Source Codes]

To create this program (Dropdown Menu Bar with HTML and CSS). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!--Created By | PakiCoder-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DropDown Menu</title>
    <link rel="stylesheet" type="text/css" href="dropmenu.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Web Design</a>
                <ul>
                    <li><a href="#">WordPress</a></li>
                    <li><a href="#">Front End</a></li>
                    <li><a href="#">Back End</a></li>
                    <li><a href="#">Full Stack</a></li>
                </ul>
                </li>
                <li><a href="#">Marketing</a>
                    <ul>
                        <li><a href="#">Email Marketing</a></li>
                        <li><a href="#">Content Marketing</a></li>
                        <li><a href="#">affiliate Marketing</a></li>
                        <li><a href="#">Product Marketing</a></li>
                    </ul>
                    </li>
                    <li><a href="#">Graphic Design</a>
                        <ul>
                            <li><a href="#">Logo Design</a></li>
                            <li><a href="#">Banner Design</a></li>
                            <li><a href="#">Poster Design</a></li>
                            <li><a href="#">Template Design</a></li>
                        </ul>
                        </li>
            </ul>
            </li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

CSS FILE:

*{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-decoration: none;
}
body{
  font-family: sans-serif;
  overflow: hidden;
  user-select: none;
  background-image: url(bg.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
}
nav{
  height: 70px;
  background: #063247;
  box-shadow: 0 3px 15px rgba(0, 0, 0, .4);
}
nav ul{
  float: left;
  margin-left: 30px;
}
nav ul li{
  display: inline-block;
}
nav ul li a{
  color: white;
  display: block;
  padding: 0 15px;
  line-height: 70px;
  font-size: 20px;
  background: #063247;
  transition: .5s;
}
nav ul li a:hover,
nav ul li a.active{
  color: #23dbdb;
}
nav ul ul{
  position: absolute;
  top: 85px;
  border-top: 3px solid #23dbdb;
  opacity: 0;
  visibility: hidden;
}
nav ul li:hover > ul{
  top: 70px;
  opacity: 1;
  visibility: visible;
  transition: .3s linear;
}
nav ul ul li{
  width: 195px;
  display: list-item;
  position: relative;
  border: 1px solid #042331;
  border-top: none;
}
nav ul ul li a{
  line-height: 50px;
}
nav ul ul ul{
  border-top: none;
}
nav ul ul ul li{
  position: relative;
  top: -70px;
  left: 165px;
}

PakiCoder

Video Tutorial of Dropdown Menu Bar with HTML and CSS

You might like this:

Dropdown Menu Bar with HTML and CSS[Source Codes]

Thanks for visiting, Keep visiting.

Post a Comment

Post a Comment

About Us

Formulir Kontak