Difference between revisions of "Template:Manchester/Navbar"
| Line 4: | Line 4: | ||
<li class="logo image"> | <li class="logo image"> | ||
<img src="https://2018.igem.org/wiki/image/T--Manchester--clear_back_logo.jpg" width = "100" height="65"/> <b>Man-cheester</b> | <img src="https://2018.igem.org/wiki/image/T--Manchester--clear_back_logo.jpg" width = "100" height="65"/> <b>Man-cheester</b> | ||
| − | + | <li><a class="active" href="https://2018.igem.org/Team:Manchester"></a>Home</li> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <li><a class="active" href="https://2018.igem.org/Team:Manchester"></a></li> | + | |
<div class="dropdown"> | <div class="dropdown"> | ||
| Line 61: | Line 56: | ||
<style> | <style> | ||
| + | /* Style The Dropdown Button */ | ||
| + | .dropbtn { | ||
| + | background-color: #4CAF50; | ||
| + | color: white; | ||
| + | padding: 16px; | ||
| + | font-size: 16px; | ||
| + | border: none; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | /* The container <div> - needed to position the dropdown content */ | ||
| + | .dropdown { | ||
| + | position: relative; | ||
| + | display: inline-block; | ||
| + | } | ||
| + | |||
| + | /* Dropdown Content (Hidden by Default) */ | ||
| + | .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; | ||
| + | } | ||
| + | |||
| + | /* Links inside the dropdown */ | ||
| + | .dropdown-content a { | ||
| + | color: black; | ||
| + | padding: 12px 16px; | ||
| + | text-decoration: none; | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | /* Change color of dropdown links on hover */ | ||
| + | .dropdown-content a:hover {background-color: #f1f1f1} | ||
| + | |||
| + | /* Show the dropdown menu on hover */ | ||
| + | .dropdown:hover .dropdown-content { | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | /* Change the background color of the dropdown button when the dropdown content is shown */ | ||
| + | .dropdown:hover .dropbtn { | ||
| + | background-color: #3e8e41; | ||
| + | } | ||
| + | |||
ul { | ul { | ||
list-style-type: none; | list-style-type: none; | ||
Revision as of 10:14, 16 August 2018
Man-cheester