Create Dropdown Menu Using Pure HTML and CSS

Welcome to the Codewithrandom blog. Today we are Going to create a Dropdown Menu Using Pure Html and Css. We use the Nav tag and Ul, li tag for the Dropdown Menu with help of Css.Hope you enjoy our blog so let’s start with a basic HTML structure for the Pure Dropdown Menu.50+ HTML, CSS & JavaScript Projects With Source Code

Table of Contents

Pure Css Drop-down Menu

Code by	Mark
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	NO
Responsive	YES

Html Code For Dropdown Menu

<!DOCTYPE html>
<html>

<head>
  <title>Pure Css Dropdown Menu</title>
  <link rel='stylesheet' href='style1.css' />
  <link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">
</head>

<body>
  <nav role="navigation" class="primary-navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Work &dtrif;</a>
        <ul class="dropdown">
          <li><a href="#">Web Development</a></li>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Illustration</a></li>
          <li><a href="#">Iconography</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>

</html>

There is all the html code for the Pure Dropdown Menu. Now, you can see output without CSS, then we write CSS for the Pure Dropdown Menu.Portfolio Website using HTML and CSS (Source Code)Output Dropdown Menu Using Pure HTML and CSS

CSS Code For Dropdown Menu

nav.primary-navigation {
  margin: 0 auto;
  display: block;
  padding: 120px 0 0 0;
  text-align: center;
  font-size: 16px;
}
nav.primary-navigation ul li {
  list-style: none;
  margin: 0 auto;
  border-left: 2px solid #3ca0e7;
  display: inline-block;
  padding: 0 30px;
  position: relative;
  text-decoration: none;
  text-align: center;
  font-family: arvo;
}
nav.primary-navigation li a {
  color: black;
}
nav.primary-navigation li a:hover {
  color: #3ca0e7;
}
nav.primary-navigation li:hover {
  cursor: pointer;
}
nav.primary-navigation ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding-left: 0;
  left: 0;
  display: none;
  background: white;
}
nav.primary-navigation ul li:hover > ul,
nav.primary-navigation ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
  min-width: 250px;
  text-align: left;
  padding-top: 20px;
  box-shadow: 0px 3px 5px -1px #ccc;
}
nav.primary-navigation ul li ul li {
  clear: both;
  width: 100%;
  text-align: left;
  margin-bottom: 20px;
  border-style: none;
}
nav.primary-navigation ul li ul li a:hover {
  padding-left: 10px;
  border-left: 2px solid #3ca0e7;
  transition: all 0.3s ease;
}
a {
  text-decoration: none;
}
a:hover {
  color: #3ca0e7;
}
ul li ul li a {
  transition: all 0.5s ease;
}

We have completed our CSS Code for Dropdown Menu, Here is our final output!

Final Output Of Dropdown Menu Using Pure CSS

I hope you like the Pure Dropdown Menu, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank youGym Website Using HTML ,CSS and JavaScript (Source Code)Written by – Code With Random/Ankicode by – Mark

Which code editor do you use for this Indian Flag coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

CodeWithRandom

Create Dropdown Menu Using Pure HTML and CSS