"

From 2013.igem.org

/* CSS styling for Dropdown Menu */

1. dropdown {

width: auto;

       height: 20px;
       position: absolute;

font-family: 'AlteHaasGroteskBold', verdana; font-size: 0;

       border-radius: 5px;

top: 5px;

       list-style: none;
       padding: 5px 10px;

left: 25%;

       background: #55594a;
       color: #e5ede6;

margin: none;

       border: none;
       z-index: 4;

}

1. dropdown > a {

display: none; }

1. dropdown li {

position: relative;

       line-height: 17px;
       vertical-align: middle;

}

1. dropdown li a {

color: #fff; /* Menubox link text color, before rollover */ display: block; }

1. dropdown li a:active {

background-color: #330000 !important; }

/* first level */

1. dropdown > ul {

background: #55594a;

       color: transparent;  /* bullet point colours - set to transparent */
       padding: 0px;
       list-style: none;
       margin: none;

}

1. dropdown > ul > li { /* Menubox settings */

width: auto; height: 100%;

       top: -2px;    /* Border overlap fix, 0 if no border */
	float: left;
       left: 0px;

}

1. dropdown > ul > li > a { /* Menubox settings */

height: 100%;

       width: 150px;
       padding: 5px 0px;
       left: 0px;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
       vertical-align: middle;

font-size: 10pt;

       text-decoration: none;

text-align: center;

       -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
       -ms-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;

}

1. dropdown > ul > li:not( :last-child ) > a {

border: none; /*segregation border, good for highlight */ }

1. dropdown > ul > li:hover > a,
2. dropdown > ul:not( :hover ) > li.active > a { /*Menubox rollover settings */

background-color: #330000;

       height: 17px;
       -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
       -ms-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;

}

/* second level */

1. dropdown li ul { /* Drop-down pre-rollover settings */

background-color: #330000; /* Set to match parent rollover */ display: none;

       list-style: none;
       text-indent: none;

font-family: 'AlteHaasGrotesk', verdana;

       border: none;
       margin-left: 0px;

position: absolute; top: 100%; /* Prevents overlap with parent element */ }

1. dropdown li:hover ul {

display: block;

       right: 0px;

}

1. dropdown li:not( :first-child ):hover ul {

left: 0px; /* only necessary if using border for parent */ }

1. dropdown li ul a { /* Drop-down pre-rollover settings */

font-size: 10pt;

       width: 70%;

border-top: none; /*Border useful for highlights */ padding: 15px 0px; /* padding between sub-links */

       margin: none;
       text-decoration: none;
       text-indent: none;
       text-align: right;

}

1. dropdown li ul li a:hover,
2. dropdown li ul:not( :hover ) li.active a { /* Drop-down rollover settings */

background-color: #034f07;

       color: #e5ede6;
       margin-left: 0px;
       width: 100%;
       -webkit-transition: all 1s ease-in-out;
       -moz-transition: all 1s ease-in-out;
       -ms-transition: all 1s ease-in-out;
       transition: all 1s ease-in-out;

}