"

From 2014.igem.org

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

1. cssmenu,
2. cssmenu ul,
3. cssmenu ul li,
4. cssmenu ul li a,
5. cssmenu #menu-button {

 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;

}

1. cssmenu:after,
2. cssmenu > ul:after {

 content: ".";
 display: block;
 clear: both;
 line-height: 0;
 height: 0;

}

1. cssmenu #menu-button {

 display: none;

}

1. cssmenu {

 width: auto;
 line-height: 1;
 background: none;

}

1. cssmenu > ul > li {

 float: left;

}

1. cssmenu.align-center > ul {

 font-size: 0;
 text-align: center;

}

1. cssmenu.align-center > ul > li {

 display: inline-block;
 float: none;

}

1. cssmenu.align-center ul ul {

 text-align: left;

}

1. cssmenu.align-right > ul > li {

 float: right;

}

1. cssmenu.align-right ul ul {

 text-align: right;

}

1. cssmenu > ul > li > a {

 padding: 16px 20px;
 font-size: 18px;
 font-weight: bold;
 text-decoration: none;
 text-transform: uppercase;
 color: #ffffff;

}

1. cssmenu > ul > li:hover > a,
2. cssmenu > ul > li.active > a {

 color: #009ae1;

}

1. cssmenu > ul > li.has-sub > a {

 padding-right: 25px;

}

1. cssmenu > ul > li.has-sub > a::after {

 position: absolute;
 top: 21px;
 right: 10px;
 width: 4px;
 height: 4px;
 border-bottom: 1px solid #000000;
 border-right: 1px solid #000000;
 content: "";
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transition: border-color 0.2s ease;
 -moz-transition: border-color 0.2s ease;
 -ms-transition: border-color 0.2s ease;
 -o-transition: border-color 0.2s ease;
 transition: border-color 0.2s ease;

}

1. cssmenu > ul > li.has-sub:hover > a::after {

 border-color: #009ae1;

}

1. cssmenu ul ul {

 position: absolute;
 left: -9999px;

}

1. cssmenu li:hover > ul {

 left: auto;

}

1. cssmenu.align-right li:hover > ul {

 right: 0;

}

1. cssmenu ul ul ul {

 margin-left: 100%;
 top: 0;

}

1. cssmenu.align-right ul ul ul {

 margin-left: 0;
 margin-right: 100%;

}

1. cssmenu ul ul li {

 height: 0;
 -webkit-transition: height .2s ease;
 -moz-transition: height .2s ease;
 -ms-transition: height .2s ease;
 -o-transition: height .2s ease;
 transition: height .2s ease;

}

1. cssmenu ul li:hover > ul > li {

 height: 32px;

}

1. cssmenu ul ul li a {

 padding: 10px 20px;
 width: 210px;
 font-size: 15px;
 background: #333333;
 text-decoration: none;
 color: #ffffff;
 text-align: left;
 -webkit-transition: color .2s ease;
 -moz-transition: color .2s ease;
 -ms-transition: color .2s ease;
 -o-transition: color .2s ease;
 transition: color .2s ease;

}

1. cssmenu ul ul li:hover > a,
2. cssmenu ul ul li a:hover {

 color: #00BAC6;

}

1. cssmenu ul ul li.has-sub > a::after {

 position: absolute;
 top: 13px;
 right: 10px;
 width: 4px;
 height: 4px;
 border-bottom: 1px solid #dddddd;
 border-right: 1px solid #dddddd;
 content: "";
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transition: border-color 0.2s ease;
 -moz-transition: border-color 0.2s ease;
 -ms-transition: border-color 0.2s ease;
 -o-transition: border-color 0.2s ease;
 transition: border-color 0.2s ease;

}

1. cssmenu.align-right ul ul li.has-sub > a::after {

 right: auto;
 left: 10px;
 border-bottom: 0;
 border-right: 0;
 border-top: 1px solid #dddddd;
 border-left: 1px solid #dddddd;

}

1. cssmenu ul ul li.has-sub:hover > a::after {

 border-color: #ffffff;

}