Jump to content

dropdown


Gentle7
 Share

Recommended Posts

  • 3 weeks later...

Hello, @Gentle7

Try this code to implement Dropdown:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

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

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

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<div class="dropdown">
  <button class="dropbtn">Mobile List</button>
  <div class="dropdown-content">
  <a href="#Apple">Apple</a>
  <a href="#Samsung">Samsung</a>
  <a href="#Sony">Sony</a>
  <a href="#Mi">Mi</a>
  <a href="#Realme">Realme</a>
  <a href="#OnePlus">OnePlus</a>
  <a href="#Intex">Intex</a>
  <a href="#Micromax">Micromax</a>
  </div>
</div>
</body>
</html>

I hope above code will be useful for you.
Thank you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...