|
|
Line 6: |
Line 6: |
| --> | | --> |
| <html> | | <html> |
| + | <head> |
| | | |
| + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
| | | |
− | <head> | + | <style> |
| <style> | | <style> |
| body {margin:0;} | | body {margin:0;} |
Line 14: |
Line 16: |
| .navbar { | | .navbar { |
| overflow: hidden; | | overflow: hidden; |
− | background-color: #333333; | + | background-color: #333; |
| font-family: Arial; | | font-family: Arial; |
− | outline: 0;
| |
| | | |
| position: fixed; | | position: fixed; |
Line 22: |
Line 23: |
| width: 100%; | | width: 100%; |
| z-index:50; | | z-index:50; |
| + | |
| } | | } |
| | | |
| .navbar a { | | .navbar a { |
| float: left; | | float: left; |
− | display: block;
| + | color: white; |
− | color: #f2f2f2; | + | |
− | outline: 0;
| + | |
| text-align: center; | | text-align: center; |
− | padding: 28px 16px; | + | padding: 28px 18px; |
| text-decoration: none; | | text-decoration: none; |
| font-size: 28px; | | font-size: 28px; |
| + | |
| + | |
| + | } |
| + | |
| + | .dropdown { |
| + | float: left; |
| + | overflow: hidden; |
| + | |
| + | |
| + | |
| } | | } |
| | | |
| + | .dropdown .dropbtn { |
| + | font-size: 28px; |
| + | border: none; |
| + | outline: none; |
| + | color: white; |
| + | padding: 28px 18px; |
| + | background-color: inherit; |
| + | |
| + | |
| + | } |
| + | |
| + | .navbar a:hover, .dropdown:hover .dropbtn { |
| + | background-color: #5d70dd; |
| + | |
| + | |
| + | |
| + | } |
| + | |
| + | .dropdown-content { |
| + | display: none; |
| + | position: absolute; |
| + | background-color: #f9f9f9; |
| + | min-width: 160px; |
| + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,.4); |
| + | z-index: 100; |
| + | |
| + | |
| + | } |
| + | |
| + | .dropdown-content a { |
| + | float: none; |
| + | color: black; |
| + | padding: 12px 18px; |
| + | text-decoration: none; |
| + | display: block; |
| + | text-align: left; |
| + | |
| + | |
| + | } |
| + | |
| + | |
| + | .dropdown-content a:hover { |
| + | background-color: #ddd; |
| + | |
| + | |
| + | } |
| + | |
| + | .dropdown:hover .dropdown-content { |
| + | display: block; |
| + | position: fixed; |
| | | |
| } | | } |
Line 44: |
Line 104: |
| <a href="https://2017.igem.org/Team:ASIJ_TOKYO">Home</a> | | <a href="https://2017.igem.org/Team:ASIJ_TOKYO">Home</a> |
| <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Team">Team</a> | | <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Team">Team</a> |
− | <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Description">Project</a>
| + | <div class="dropdown"> |
− | <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Notebook">Notebook</a>
| + | |
| + | <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Project">Project</a> |
| + | |
| + | <div class="dropdown-content"> |
| + | <a href="#">Description</a> |
| + | <a href="#">Design</a> |
| + | <a href="#">Experiments</a> |
| + | <a href="#">Notebook</a> |
| + | <a href="#">Results</a> |
| + | <a href="#">Attributions</a> |
| + | |
| + | </div> |
| + | </div> |
| + | |
| | | |
| <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Parts">Parts</a> | | <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Parts">Parts</a> |
| <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Safety">Safety</a> | | <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Safety">Safety</a> |
| <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Engagement">Human Practices</a> | | <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Engagement">Human Practices</a> |
| + | |
| + | |
| | | |
| | | |
| | | |
− |
| |
| | | |
| </div> | | </div> |