|
|
(5 intermediate revisions by the same user not shown) |
Line 9: |
Line 9: |
| <!-- This tells the browser that your page is responsive --> | | <!-- This tells the browser that your page is responsive --> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | | <meta name="viewport" content="width=device-width, initial-scale=1"> |
− |
| |
− | <style>
| |
− | /*Strip the ul of padding and list styling*/
| |
− | ul {
| |
− | list-style-type:none;
| |
− | margin:0;
| |
− | padding:0;
| |
− | position: absolute;
| |
− | }
| |
− | /*Create a horizontal list with spacing*/
| |
− | li {
| |
− | display:inline-block;
| |
− | float: left;
| |
− | margin-right: 1px;
| |
− | }
| |
− |
| |
− | /*Style for menu links*/
| |
− | li a {
| |
− | display:block;
| |
− | min-width:140px;
| |
− | height: 50px;
| |
− | text-align: center;
| |
− | line-height: 50px;
| |
− | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
| |
− | color: #fff;
| |
− | background: #2f3036;
| |
− | text-decoration: none;
| |
− | }
| |
− | /*Hover state for top level links*/
| |
− | li:hover a {
| |
− | background: #19c589;
| |
− | }
| |
− | /*Style for dropdown links*/
| |
− | li:hover ul a {
| |
− | background: #f3f3f3;
| |
− | color: #2f3036;
| |
− | height: 40px;
| |
− | line-height: 40px;
| |
− | }
| |
− | /*Hover state for dropdown links*/
| |
− | li:hover ul a:hover {
| |
− | background: #19c589;
| |
− | color: #fff;
| |
− | }
| |
− |
| |
− | /*Hide dropdown links until they are needed*/
| |
− | li ul {
| |
− | display: none;
| |
− | }
| |
− | /*Make dropdown links vertical*/
| |
− | li ul li {
| |
− | display: block;
| |
− | float: none;
| |
− | }
| |
− | /*Prevent text wrapping*/
| |
− | li ul li a {
| |
− | width: auto;
| |
− | min-width: 100px;
| |
− | padding: 0 20px;
| |
− | }
| |
− | /*Display the dropdown on hover*/
| |
− | ul li a:hover + .hidden, .hidden:hover {
| |
− | display: block;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | </style>
| |
| | | |
| </head> | | </head> |
Line 92: |
Line 22: |
| <div class="col-12 rmvpadmarg tofront fixed"> | | <div class="col-12 rmvpadmarg tofront fixed"> |
| <nav class="navbar"> | | <nav class="navbar"> |
− | <a href="https://2017.igem.org/Team:DTU-Denmark">
| |
− | <img src="https://static.igem.org/mediawiki/2017/3/31/T--DTU-Denmark--home_button_white.jpg" alt="DTU-logo" align="left" height="27" style="margin:7px 0px 0px 20px;">
| |
− | </a>
| |
− | <div class="navbarcenter">
| |
− | <ul id="menu">
| |
− | <li><a href="#">Home</a></li>
| |
− | <li>
| |
− | <a href="#">About ↓</a>
| |
− | <ul class="hidden">
| |
− | <li><a href="#">Who We Are</a></li>
| |
− | <li><a href="#">What We Do</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li>
| |
− | <a href="#">Portfolio ↓</a>
| |
− | <ul class="hidden">
| |
− | <li><a href="#">Photography</a></li>
| |
− | <li><a href="#">Web & User Interface Design</a></li>
| |
− | <li><a href="#">Illustration</a></li>
| |
− | </ul>
| |
− | </li>
| |
− | <li><a href="#">News</a></li>
| |
− | <li><a href="#">Contact</a></li>
| |
− | </ul>
| |
− | </div>
| |
− |
| |
| </nav> | | </nav> |
| </div> | | </div> |