Difference between revisions of "User:Sara.hunter/sandbox4"
Jump to navigation
Jump to search
Sara.hunter (talk | contribs) (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...") |
Sara.hunter (talk | contribs) |
||
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>