Master Frontend to Backend eBook Banner
html dropdown menu code

Create Dropdown Menu Using Pure HTML and CSS

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

Pure Css Drop-down Menu

Code byMark
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNO
ResponsiveYES

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)OutputDropdown 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

Dropdown Menu Using Pure HTML and CSSDropdown Menu Using Pure HTML and CSSI 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!



Leave a Reply