dropdown

Gentle7 · September 28, 2019

Pleas am studing with w3school and dropdown is not working for me what should i do?

dsonesuk · September 28, 2019

Showing the code would help, as were not mind readers.

Placidus · September 29, 2019

The code on the page and examples of html Drag-n-Drop section doesn't work, at list in latest version of Firefox

Don't read minds, try it yourself ;)

Makwana Prahlad · October 16, 2019

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.

Sign In

dropdown

Recommended Posts

Gentle7

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Placidus

Link to comment

Share on other sites

Makwana Prahlad

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity