"

From 2014.igem.org

1. cssmenu,
2. cssmenu ul,
3. cssmenu ul li,
4. cssmenu ul li a {

 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 {

 width: 150px;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 5px;
 color: #ffffff;
 margin-top: 160px;
 position: fixed;

}

1. cssmenu.align-right {

 float: right;

}

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

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

}

1. cssmenu ul li {

 display: block;
 z-index: 1;
 background: #222222;
 /* Old browsers */

 background: -moz-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 background: -webkit-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 background: -o-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 background: -ms-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);
 background: linear-gradient(to top, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);

}

1. cssmenu ul li::after {

 content: "";
 width: 100%;
 height: 8px;
 position: absolute;
 border-top-left-radius: 50% 4px;
 border-top-right-radius: 50% 4px;
 background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);
 background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
 z-index: 2;
 bottom: 10px;

}

1. cssmenu ul li a {

 display: block;
 padding: 10px 30px;
 text-decoration: none;
 font-size: 12px;
 text-transform: uppercase;
 color: #ffffff;
 z-index: 3;

}

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

 color: #ffffff;

}

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

 background: #16bd8c;
 background: -moz-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 background: -webkit-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 background: -o-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 background: -ms-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);
 background: linear-gradient(to top, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);

}

1. cssmenu ul li:hover::after,
2. cssmenu ul li.active::after {

 background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);
 background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

}