Difference between revisions of "Team:UC Davis/AchalaTestPage"

Line 10: Line 10:
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
   /*-------------------------------------------------------------------*/
 
   /*-------------------------------------------------------------------*/
−
 
+
  /*----Top Navigation Styling-----*/
 
   #topnav {
 
   #topnav {
 
     display: table;
 
     display: table;
−
    width: 100%;
+
  width: 100%;
−
    background-color: #002855;
+
  background-color: #002855;
−
    margin: 0;
+
  margin-left: 0px;
 +
  margin-top: 0px;
 
}
 
}
  
 
   #topnav li {
 
   #topnav li {
 
     display: table-cell;
 
     display: table-cell;
−
    width: 16.666666667%;
+
  width: 16.666666667%;
−
    line-height: 50px;
+
  line-height: 50px;
−
    text-align: center;
+
  text-align: center;
−
}
+
 
 +
}
 
   #topnav a {
 
   #topnav a {
 
     text-decoration: none;
 
     text-decoration: none;
 
     font-size: 20px;
 
     font-size: 20px;
 
     color: white;
 
     color: white;
 +
   
 
   }
 
   }
 
   #topnav li a {
 
   #topnav li a {
 
     display: block;
 
     display: block;
 
   }
 
   }
−
   #topnav li a:hover {
+
  /* The dropdown container */
 +
.dropdown {
 +
  float: left;
 +
  margin-left: : auto;
 +
margin-right: : auto;
 +
  overflow: hidden;
 +
}
 +
 
 +
/* Dropdown button */
 +
.dropdown .dropbtn {
 +
  font-size: 20px;
 +
  border: none;
 +
  outline: none;
 +
  color: white;
 +
  padding: 14px 16px;
 +
  background-color: inherit;
 +
  font-family: inherit; /* Important for vertical align on mobile phones */
 +
  margin-left: : auto; /* Important for vertical align on mobile phones */
 +
margin-right: : auto;
 +
  text-align: center;
 +
}
 +
   #topnav li a:hover, .dropdown:hover .dropbtn {
 
     background-color: #123b68;
 
     background-color: #123b68;
 
   }
 
   }
−
   .CenozoicLogo {
+
   /* Dropdown content (hidden by default) */
−
    background-color: #002855;
+
.dropdown-content {
−
   }
+
  display: none;
 +
  position: relative;
 +
  background-color: #eff1f2;
 +
   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 {
 +
  float: none;
 +
  color: black;
 +
  padding: 12px 16px;
 +
  text-decoration: none;
 +
  display: block;
 +
  text-align: left;
 +
}
 +
 
 +
/* Add a grey background color to dropdown links on hover */
 +
.dropdown-content a:hover {
 +
  background-color: #ddd;
 +
}
 +
 
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
  display: block;
 +
}
 +
 
 +
  /*--------------------------------*/
 
</style>
 
</style>
 
<body>
 
<body>
−
   <div class="CenozoicLogo">
+
   <div class="CenozoicLogo" style="background-color: #002855">
 
     <img src="https://static.igem.org/mediawiki/2018/1/1b/T--UC_Davis--DNA_refined.png" alt="Cenozoic logo" style="display: block;margin-left: auto;margin-right: auto;">
 
     <img src="https://static.igem.org/mediawiki/2018/1/1b/T--UC_Davis--DNA_refined.png" alt="Cenozoic logo" style="display: block;margin-left: auto;margin-right: auto;">
 
   </div>
 
   </div>
 
   <!--______________Top Navigation Bar____________-->
 
   <!--______________Top Navigation Bar____________-->
 
   <ul id="topnav">
 
   <ul id="topnav">
−
     <li><a href="Project">Project</a></li>
+
     <div class="topnav">  
−
    <li><a href="Human_Practices">Human Practices</a></li>
+
        <!--______________Project____________-->
−
    <li><a href="Tools">Tools</a></li>
+
      <div class="dropdown">
−
    <li><a href="Safety">Safety</a></li>
+
    <button class="dropbtn">Project</button>
−
    <li><a href="Acknowledgements">Acknowledgements</a></li>
+
    <div class="dropdown-content">
−
    <li><a href="iGEM">iGEM</a></li>
+
      <a href="#">Link 1</a>
 +
      <a href="#">Link 2</a>
 +
      <a href="#">Link 3</a>
 +
    </div>
 +
</div>
 +
  <!--______________Human Resources____________-->
 +
<div class="dropdown">
 +
<button class="dropbtn">Human Resources</button>
 +
<div class="dropdown-content">
 +
<a href="#">Link 1</a>
 +
<a href="#">Link 2</a>
 +
<a href="#">Link 3</a>
 +
</div>
 +
</div>
 +
  <!--______________Tools____________-->
 +
  <div class="dropdown">
 +
  <button class="dropbtn">Tools</button>
 +
  <div class="dropdown-content">
 +
  <a href="#">Link 1</a>
 +
  <a href="#">Link 2</a>
 +
  <a href="#">Link 3</a>
 +
  </div>
 +
  </div>
 +
      <!--______________Safety____________-->
 +
      <div class="dropdown">
 +
      <button class="dropbtn">Safety</button>
 +
      <div class="dropdown-content">
 +
      <a href="#">Link 1</a>
 +
      <a href="#">Link 2</a>
 +
      <a href="#">Link 3</a>
 +
      </div>
 +
      </div>
 +
      <!--______________Acknowledgements____________-->
 +
      <div class="dropdown">
 +
      <button class="dropbtn">Acknowledgements</button>
 +
      <div class="dropdown-content">
 +
      <a href="#">Link 1</a>
 +
      <a href="#">Link 2</a>
 +
      <a href="#">Link 3</a>
 +
      </div>
 +
      </div>
 +
      <!--______________iGEM____________-->
 +
      <div class="dropdown">
 +
      <button class="dropbtn">iGEM</button>
 +
      <div class="dropdown-content">
 +
      <a href="#">Link 1</a>
 +
      <a href="#">Link 2</a>
 +
      <a href="#">Link 3</a>
 +
      </div>
 +
      </div>
 
</ul>
 
</ul>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 04:29, 25 July 2018

iGEM