View source for Template:Navbar temp

<html>
<title>Northwestern Template </title>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {margin:0;}


.nav_container {
min-width: 100%;
    overflow: hidden;
    background-color: white!important;
    position: fixed;
    overflow: hidden;
    z-index: 1;
       
}

.nav_container a {
    font-size: 16px;
    color: #4C177D;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    
}

.dropdown {
    float: right;
    overflow: hidden;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none; /*2px solid white;*/
    border-radius: 12px;
    outline: none;
    color: #4C177D;
    padding: 14px 16px;
    background-color: white !important;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.dropdown:hover .dropbtn{
    background-color: white;
    color: #B6ACD1;
    border-radius: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position:fixed;
    background-color: white;
    min-width: 160px;
    z-index: 2;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.dropdown-content a {
    float: none;
    color: #B6ACD1;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.dropdown-content a:hover {
    background-color: #B6ACD1;
    border-radius: 12px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    color:white; 
}

.dropdown:hover .dropdown-content {
    display: inline-block;
    color: #B6ACD1;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}



</style>


<body>

<div class="nav_container">
   <div class="dropdown">
    <button class="dropbtn">Human Practices<i class="fa fa-caret-down fa-fw"></i></button>
    <div class="dropdown-content">
      <a href="https://2017.igem.org/Team:Northwestern/humanpractices">Overview</a> 
      <a href=https://2017.igem.org/Team:Northwestern/HP/Silver>Silver</a>
      <a href= https://2017.igem.org/Team:Northwestern/HP/Gold_Integrated>Gold</a>
      <a href= "https://2017.igem.org/Team:Northwestern/Collaborations">Collaborations</a>
      <a href="https://2017.igem.org/Team:Northwestern/Engagement">Engagement </a>
    </div>
  </div> 

 <div class="dropdown">
    <button class="dropbtn">Parts<i class="fa fa-caret-down fa-fw"></i></button>     
    <div class="dropdown-content">
      <a href="https://2017.igem.org/Team:Northwestern/Parts">Overview</a>
        </div>
  </div> 
 <div class="dropdown">
    <button class="dropbtn">Lab<i class="fa fa-caret-down fa-fw"></i></button>     
    <div class="dropdown-content">
      <a href="https://2017.igem.org/Team:Northwestern/experiments">Experiments </a>
      <a href="https://2017.igem.org/Team:Northwestern/Model">Modeling</a>
      <a href="https://2017.igem.org/Team:Northwestern/Results">Results</a>
      <a href="https://2017.igem.org/Team:Northwestern/Lab">Notebook</a>
      <a href="https://2017.igem.org/Team:Northwestern/Safety"> Safety </a> 
      <a href="https://2017.igem.org/Team:Northwestern/InterLab"> Interlab </a> 
    </div>
  </div> 
 <div class="dropdown">
    <button class="dropbtn">Project<i class="fa fa-caret-down fa-fw"></i></button>     
    <div class="dropdown-content">
      <a href="https://2017.igem.org/Team:Northwestern/project">Description</a>
      <a href="https://2017.igem.org/Team:Northwestern/Design">Design </a>
      <a href="https://2017.igem.org/Team:Northwestern/Medals">Medal Criteria</a>
    </div>
  </div> 
 <div class="dropdown">
    <button class="dropbtn">Team<i class="fa fa-caret-down fa-fw"></i></button>     
    <div class="dropdown-content">
      <a href="https://2017.igem.org/Team:Northwestern/Team#"> About Us </a>
      <a href="https://2017.igem.org/Team:Northwestern/Attributions">Attributions </a>
    </div>
  </div> 
<a  href="https://2017.igem.org/Team:Northwestern">
<div class="dropdown">
  <button class="dropbtn">Home</button>
</div>
</a>     
  </div> 


</body> 
</html>