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-----*/
 
   /*----Top Navigation Styling-----*/
 
   /*----Top Navigation Styling-----*/
 
   #topnav {
 
   #topnav {
Line 24: Line 25:
 
     line-height: 50px;
 
     line-height: 50px;
 
     text-align: center;
 
     text-align: center;
−
}
+
}
 
   #topnav a {
 
   #topnav a {
 
     text-decoration: none;
 
     text-decoration: none;
Line 33: Line 34:
 
     display: block;
 
     display: block;
 
   }
 
   }
−
   #topnav li a:hover {
+
   /*--------------------------------*/
−
     background-color: #123b68;
+
  /* The dropdown container */
 +
  .dropdown {
 +
     float: left;
 +
    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: 0; /* Important for vertical align on mobile phones */
 +
  }
 +
/* Adds navy blue color to backgroup to navbar links
 +
#topnav li a:hover, .dropdown:hover .dropbtn {
 +
  background-color: #123b68;
 +
}*/
 +
  /* Dropdown content (hidden by default) */
 +
.dropdown-content {
 +
  display: none;
 +
  position: absolute;
 +
  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>
Line 44: Line 94:
 
   <!--______________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>
 +
</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 06:03, 25 July 2018

iGEM