Difference between revisions of "User:Sara.hunter/sandbox4"

From wiki
Jump to navigation Jump to search
(Created page with "<div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link...")
 
Line 1: Line 1:
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<style>
 +
.dropbtn {
 +
  background-color: #4CAF50;
 +
  color: white;
 +
  padding: 16px;
 +
  font-size: 16px;
 +
  border: none;
 +
}
 +
 +
.dropdown {
 +
  position: relative;
 +
  display: inline-block;
 +
}
 +
 +
.dropdown-content {
 +
  display: none;
 +
  position: absolute;
 +
  background-color: #f1f1f1;
 +
  min-width: 160px;
 +
  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: #ddd;}
 +
 +
.dropdown:hover .dropdown-content {display: block;}
 +
 +
.dropdown:hover .dropbtn {background-color: #3e8e41;}
 +
</style>
 +
</head>
 +
<body>
 +
 +
<h2>Hoverable Dropdown</h2>
 +
<p>Move the mouse over the button to open the dropdown menu.</p>
 +
 
<div class="dropdown">
 
<div class="dropdown">
 
   <button class="dropbtn">Dropdown</button>
 
   <button class="dropbtn">Dropdown</button>

Revision as of 13:38, 24 April 2020

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn { 

 background-color: #4CAF50;
 color: white;
 padding: 16px;
 font-size: 16px;
 border: none;

}

.dropdown { 

 position: relative;
 display: inline-block;

}

.dropdown-content { 

 display: none;
 position: absolute;
 background-color: #f1f1f1;
 min-width: 160px;
 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: #ddd;}

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

.dropdown:hover .dropbtn {background-color: #3e8e41;} </style> </head> <body>

Hoverable Dropdown

Move the mouse over the button to open the dropdown menu.

 <button class="dropbtn">Dropdown</button>

   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>

 <button class="dropbtn">Dropdown</button>

   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>

 <button class="dropbtn">Dropdown2</button>

   <a href="#">Link 4</a>
   <a href="#">Link 5</a>
   <a href="#">Link 6</a>

 <button class="dropbtn">Dropdown3</button>

   <a href="#">Link 7</a>
   <a href="#">Link 8</a>
   <a href="#">Link 9</a>
Retrieved from "https://wiki.gccollab.ca/index.php?title=User:Sara.hunter/sandbox4&oldid=23838"