"

From 2013.igem.org

.meny {

   display: none;
   padding: 20px;
   overflow-x: hidden;
   overflow-y: auto;
   background: #333;
   color: #eee;

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

} .meny ul {

   margin-top: 10px;

} .meny ul li {

   display: inline-block;
   width: 200px;
   list-style: none;
   font-size: 20px;
   padding: 3px 10px;

} .meny ul li:before {

   content: '-';
   margin-right: 5px;
   color: rgba( 255, 255, 255, 0.2 );

}

/**

* Hint graphic that appears while menu is inactive
*/

.meny-arrow {

   position: absolute;
   z-index: 10;

   border: 10px solid transparent;

   -webkit-transition: opacity 0.4s ease 0.4s;
   -moz-transition: opacity 0.4s ease 0.4s;
   -ms-transition: opacity 0.4s ease 0.4s;
   -o-transition: opacity 0.4s ease 0.4s;
   transition: opacity 0.4s ease 0.4s;

} .meny-left .meny-arrow {

   left: 14px;
   top: 50%;
   margin-top: -16px;
   border-left: 16px solid #333;

} .meny-right .meny-arrow {

   right: 14px;
   top: 50%;
   margin-top: -16px;
   border-right: 16px solid #333;

} .meny-top .meny-arrow {

   left: 50%;
   top: 14px;
   margin-left: -16px;
   border-top: 16px solid #333;

} .meny-bottom .meny-arrow {

   left: 50%;
   bottom: 14px;
   margin-left: -16px;
   border-bottom: 16px solid #333;

} .meny-active .meny-arrow {

   opacity: 0;

   -webkit-transition: opacity 0.2s ease;
   -moz-transition: opacity 0.2s ease;
   -ms-transition: opacity 0.2s ease;
   -o-transition: opacity 0.2s ease;
   transition: opacity 0.2s ease;

}