ATIP
<!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>