Template:Dropdown: Difference between revisions
Jump to navigation
Jump to search
(Created page with "<div class="dropdown"> <div class="dropbtn">{{{title|Dropdown}}}</div> <div class="dropdown-content plainlinks"><!-- -->{{#if:{{{1|}}}|<span>{{{1}}}</span>}}<!-- -->{{#if:{{{2|}}}|<span>{{{2}}}</span>}}<!-- -->{{#if:{{{3|}}}|<span>{{{3}}}</span>}}<!-- -->{{#if:{{{4|}}}|<span>{{{4}}}</span>}}<!-- -->{{#if:{{{5|}}}|<span>{{{5}}}</span>}}<!-- --></div> </div>") |
No edit summary |
||
| Line 1: | Line 1: | ||
<div class="dropdown"> | <div class="dropdown"> | ||
< | <button class="dropbtn">Select Option</button> | ||
<div class="dropdown-content | <div class="dropdown-content"> | ||
<a href="#">Option 1</a> | |||
<a href="#">Option 2</a> | |||
<a href="#">Option 3</a> | |||
</div> | |||
-- | </div> | ||
-- | |||
</ | <style> | ||
.dropdown { | |||
position: relative; | |||
display: inline-block; | |||
} | |||
.dropbtn { | |||
background-color: #4CAF50; | |||
color: white; | |||
padding: 16px; | |||
font-size: 16px; | |||
border: none; | |||
cursor: pointer; | |||
} | |||
.dropdown-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:hover .dropdown-content { | |||
display: block; | |||
} | |||
.dropdown-content a { | |||
color: black; | |||
padding: 12px 16px; | |||
text-decoration: none; | |||
display: block; | |||
} | |||
.dropdown-content a:hover { | |||
background-color: #f1f1f1; | |||
} | |||
</style> | |||
Latest revision as of 22:02, 7 November 2024
<button class="dropbtn">Select Option</button>
<a href="#">Option 1</a> <a href="#">Option 2</a> <a href="#">Option 3</a>
<style> .dropdown {
position: relative; display: inline-block;
}
.dropbtn {
background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer;
}
.dropdown-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:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: black; padding: 12px 16px; text-decoration: none; display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
} </style>