"

From 2013.igem.org

/* ---Calvin Hue

• /

1. navb, .dl-back {

display:none; } nav { display:block; width:800px; padding:0; overflow: visible; height:68px; margin: 0 auto; } .nav { font-size: 0;

 text-align: center;
 width: 100%;

position: relative; } .nav > li{ display:block; float:left; width:12.5%; } .nav li, .nav li a { text-transform:uppercase; list-style: none; font:14px Quicksand; font-weight:700; } .nav > li a { display: block; position: relative; width:100%; float: left; padding-bottom: 20px; height:100%; text-decoration: none; color: #393939; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } .nav > li a:hover { color: #38c04b; } .effect {

 position: absolute;
 left: 6.25%;
 -webkit-transition: 0.7s ease-in-out;
 -moz-transition: 0.7s ease-in-out;
 -o-transition: 0.7s ease-in-out;
 -ms-transition: 0.7s ease-in-out;
 transition: 0.7s ease-in-out;
 width: 12.5%;
 height: 3px;
 top: 31px;
 background: #38c04b;
 margin-left:-50px;

} .nav li:nth-child(1):hover ~ .effect { left: 6.25%; } .nav li:nth-child(2):hover ~ .effect { left: 18.75%; } .nav li:nth-child(3):hover ~ .effect { left: 31.25%; } .nav li:nth-child(4):hover ~ .effect { left: 43.75%; } .nav li:nth-child(5):hover ~ .effect { left: 56.25%; } .nav li:nth-child(6):hover ~ .effect { left: 68.75%; } .nav li:nth-child(7):hover ~ .effect { left: 81.25%; } .nav li:nth-child(8):hover ~ .effect { left: 93.75%; } .nav li:nth-child(5) a { line-height:80%; } ul.nav li:nth-child(5) ul { margin-top:-3px; } ul.nav li {position:relative;} ul.nav li ul {

 padding: 0;

position: absolute; top: 100%;

 left: 0;
 width: 275px;

-moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;

 display: none;
 visibility: hidden;
 -webkit-transiton: opacity 0.5s;
 -moz-transition: opacity 0.5s;
 -ms-transition: opacity 0.5s;
 -o-transition: opacity 0.5s;
 -transition: opacity 0.5s;

} ul.nav li ul:before { content:;

   display:block;
   width:0;
   height:0;
   position:absolute;
   pointer-events: none;    
   border-left: 8px solid transparent;
   border-right: 8px solid transparent; 
   border-bottom:8px solid #555;
   left:30px;
   top:-4px;

} ul.nav li ul li a { position:relative; text-transform:none;

 display: block; 
 color: #fff;
 font-size:14px!important;

line-height:200%!important;

 padding-bottom:0px;
 text-shadow: 0 -1px 0 #000;

} ul.nav li ul li:nth-child(2n) a {

 background: #555; 

} ul.nav li ul li:nth-child(2n+1) a {

 background: #5f5f5f; 

} ul.nav li ul li a:hover { background: #888; color: #fff; } ul.nav li:hover ul {

 display: block;
 visibility: visible;

}