"

From 2013.igem.org

/* CSS styling for Dropdown Menu */

1. dropdown {

width: 600px;

       height: auto;
       position: absolute;

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

       border-radius: 5px;

top: 9px;

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

left: 33%;

       background: #5f5f5f;
       color: pink;

margin: none;

       border: none;

}

1. dropdown > a {

display: none; }

1. dropdown li {

position: relative;

       vertical-align: text-top;

}

1. dropdown li a {

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

1. dropdown li a:active {

background-color: purple !important; }

/* first level */

1. dropdown > ul {

height: auto; background: #5f5f5f;

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

}

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

width: 150px; height: 100%;

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

}

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

height: 100%;

       width: auto;
       vertical-align: text-top;

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: purple;

       -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: purple; /* Set to match parent rollover */ display: none;

       text-indent: none;
       list-style: none;
       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: 8pt; border-top: none; /*Border useful for highlights */ padding: 15px 0px; /* padding between sub-links */

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

}

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

background-color: red;

       color: pink;
       margin-left: 0px;
       -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;

}