Dropdown menu using HTML and CSS

Hello Coders,

In this article, you will learn to create a dropdown menu. Copy and paste the below code in HTML and CSS file separately.

Follow these simple steps to make a fully responsive template:

1) Open any code editor like Visual Studio.
2) Create HTML, CSS files and put them in your project folder which you create.
3) Link the CSS File With HTML File.
4) Copy the HTML code, which I gave below, and paste it into the HTML which you create.

See also  HTML / CSS Only Off-canvas Slide and Push Navigation

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
   <!--www.codeithub.com-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <div class="dropdown">
          <button class="dropbtn">Dropdown 
            <i class="fa fa-caret-down"></i>
          </button>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div> 
        <div class="dropdwn">
            <button class="dropbtn22">Dropdown
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdwn-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
            </div>
        </div>
      </div>
    <div class="text">
      <h3>www.codeithub.com</h3>
    </div>
</body>
</html>

CSS Code:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f5e5e5;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  border-radius: 10px;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-radius: 10px;
}

.dropdown {
  float: left;
  overflow: hidden;
  border-radius: 10px;
}

.dropdwn{
  float: left;
  overflow: hidden;
  border-radius: 10px;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdwn .dropbtn22{
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.navbar a:hover, .dropdown:hover, .dropbtn, .dropbtn22, .dropdwn:hover{
  background-color: #ff0077;
}

.dropdown-content, .dropdwn-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a, .dropdwn-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover, .dropdwn-content a:hover {
  background-color: #f5e5e5;
}

.dropdown:hover .dropdown-content , .dropdwn:hover .dropdwn-content{
  display: block;
}
.text{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  z-index: -1;
  padding: 0 20px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.text h3{
  font-size: 45px;
  margin: 5px 0;
}

OUTPUT

See also  Hotel booking Registration form using JavaScript

More Examples:

Leave a Reply

Your email address will not be published. Required fields are marked *