You are currently viewing Pure Dropdown Menu Using Html Css |Html Css Dropdownmenu

Pure Dropdown Menu Using Html Css |Html Css Dropdownmenu

Pure Dropdown Menu Using Html Css |Html Css Dropdownmenu

Welcome to Code With Random blog. We learn how to create a Pure Dropdown Menu. We use HTML & CSS  for Pure Dropdown Menu. Hope you enjoy our blog so let’s start with a basic HTML structure for the Pure Dropdown Menu.

Html Code 

Table of Contents

<!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 HTML code for the Pure Dropdown Menu. Now, you can see output without CSS, then we write CSS for the Pure Dropdown Menu.

Output

html dropdown menu code

CSS Code 

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 section,  Here is our final updated output CSS.

Final Output

dropdown menu css

dropdown menu css

We have completed our CSS section,  Here is our updated output with CSS. 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

This post teaches us to create a Pure Dropdown Menu using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – Mark

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3.Notes App Using Html Css Javascript

Leave a Reply