Line 1: | Line 1: | ||
− | + | <!DOCTYPE html> | |
− | <html | + | <html> |
<head> | <head> | ||
− | + | <style> | |
− | + | ul { | |
− | + | list-style-type: none; | |
− | + | margin: 0; | |
− | + | padding: 0; | |
+ | overflow: hidden; | ||
+ | background-color: #333; | ||
+ | } | ||
− | + | 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); | ||
+ | } | ||
− | + | .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 class="active" href="#home">Home</a></li> | ||
+ | <li><a href="#news">News</a></li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" 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 19:00, 13 July 2016
<!DOCTYPE html>
Dropdown Menu inside a Navigation Bar
Hover over the "Dropdown" link to see the dropdown menu.