Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!
Difference between revisions of "ATIP"
Jump to navigation
Jump to search
(Replaced content with "<!DOCTYPE html> <html> <head> <style> body { background-color:white; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #...") Tag: Replaced |
|||
Line 1: | Line 1: | ||
− | + | <!DOCTYPE html> | |
− | <! | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<html> | <html> | ||
− | + | <head> | |
− | + | <style> | |
− | + | body { | |
− | + | background-color:white; | |
− | + | } | |
− | + | ul { | |
− | + | list-style-type: none; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
− | + | overflow: hidden; | |
− | + | background-color: #38444d; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | li { | |
− | + | float: left; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | li a, .dropbtn { | |
− | + | display: inline-block; | |
− | + | color: white; | |
− | + | text-align: center; | |
− | + | padding: 14px 16px; | |
− | + | text-decoration: none; | |
− | + | } | |
− | |||
− | |||
− | |||
− | + | li a:hover, .dropdown:hover .dropbtn { | |
− | + | background-color: red; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | li.dropdown { | |
− | + | display: inline-block; | |
− | + | } | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .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-content a { | |
− | + | color: black; | |
− | + | padding: 12px 16px; | |
− | + | text-decoration: none; | |
− | + | display: block; | |
− | + | text-align: left; | |
+ | } | ||
− | + | .dropdown-content a:hover {background-color: #f1f1f1;} | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .dropdown:hover .dropdown-content { | |
+ | display: block; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
− | + | <ul> | |
− | + | <li><a href="#home">Home</a></li> | |
− | </ | + | <li><a href="#news">News</a></li> |
+ | <li class="dropdown"> | ||
+ | <a href="javascript:void(0)" class="dropbtn">Dropdown</a> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="#">Link 1</a> | ||
+ | <a href="#">Link 2</a> | ||
+ | <a href="#">Link 3</a> | ||
</div> | </div> | ||
− | </ | + | </li> |
− | </ | + | </ul> |
− | |||
+ | <h3>Dropdown Menu inside a Navigation Bar</h3> | ||
+ | <p>Hover over the "Dropdown" link to see the dropdown menu.</p> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 15:23, 12 June 2025
<!DOCTYPE html> <html> <head> <style> body {
background-color:white;
} ul {
list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #38444d;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.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-content a {
color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
} </style> </head> <body>
- <a href="#home">Home</a>
- <a href="#news">News</a>
-
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a>
Hover over the "Dropdown" link to see the dropdown menu.
</body> </html>