Difference between revisions of "Team:TP-CC San Diego/Templates/NavBar"
| Line 224: | Line 224: | ||
--> | --> | ||
| − | --Jodie's Code-- | + | <!-- Jodie's Code --> |
| + | <html> | ||
| + | <head> | ||
| + | <style> | ||
| + | .dropbtn { | ||
| + | background-color: #4CAF50; | ||
| + | color: white; | ||
| + | padding: 16px; | ||
| + | font-size: 16px; | ||
| + | border: none; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | .dropdown { | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
| + | } | ||
| + | |||
| + | .dropdown-content { | ||
| + | display: none; | ||
| + | position: absolute; | ||
| + | right: 0; | ||
| + | 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; | ||
| + | } | ||
| + | |||
| + | .dropdown-content a:hover {background-color: #f1f1f1} | ||
| + | |||
| + | .dropdown:hover .dropdown-content { | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | .dropdown:hover .dropbtn { | ||
| + | background-color: #3e8e41; | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | |||
| + | <div class="dropdown"> | ||
| + | <button class="dropbtn">First </button> | ||
| + | <div class="dropdown-content" style="left:0;"> | ||
| + | <a href="#">Link 1</a> | ||
| + | <a href="#">Link 2</a> | ||
| + | <a href="#">Link 3</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="dropdown"> | ||
| + | <button class="dropbtn">Second </button> | ||
| + | <div class="dropdown-content"> | ||
| + | <a href="#">Link 1</a> | ||
| + | <a href="#">Link 2</a> | ||
| + | <a href="#">Link 3</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="dropdown"> | ||
| + | <button class="dropbtn">Third </button> | ||
| + | <div class="dropdown-content"> | ||
| + | <a href="#">Link 1</a> | ||
| + | <a href="#">Link 2</a> | ||
| + | <a href="#">Link 3</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="dropdown"> | ||
| + | <button class="dropbtn">Fourth</button> | ||
| + | <div class="dropdown-content"> | ||
| + | <a href="#">Link 1</a> | ||
| + | <a href="#">Link 2</a> | ||
| + | <a href="#">Link 3</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | </body> | ||
| + | </html> | ||
Revision as of 05:34, 16 August 2017
