You are currently viewing Create Dropdown Menu Using Pure HTML and CSS

Create Dropdown Menu Using Pure HTML and CSS

Free Coding Ebook 👉 Get Now

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

Dropdown Menu Using Pure HTML and CSS Dropdown Menu Using Pure HTML and 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 you Gym Website Using HTML ,CSS and JavaScript (Source Code) Written by – Code With Random/Anki code 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!

Free Coding Ebook 👉 Get Now

Leave a Reply