Team:Imperial College/Templates/Header

From 2013.igem.org

ul.navigation-menu { box-sizing: border-box; list-style-type: none; width: 975px; height: 50px; text-align: center; display: inline-block; margin: 0; padding: 0; position: relative; border-radius: 5px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; cursor: pointer; /* CSS3 Gradient */ background: #36a9e1; } ul.navigation-menu a:link, ul.navigation-menu a:visited { text-decoration: none; color: #ffffff; display: inline-block; width: 100%; height: 100%; } ul.navigation-menu > li { display: block; float: left; line-height: 50px; height: 50px; text-align: center; width: 194px; padding: 0; margin: 0; border-right: 1px solid #000; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } ul.navigation-menu > li:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } ul.navigation-menu > li:last-child { border-right: none; border-radius: 5px; } ul.navigation-menu > li ul { -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; opacity: 0; position: relative; z-index: 9999; background: #36a9e1; list-style-type: none; text-align: center; padding: 0; margin: 0; height: 0; } ul.navigation-menu > li ul li { display: block; padding: 0; margin: 0; height: 50px; line-height: 50px; border-bottom: 1px solid black; height: 0; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; } ul.navigation-menu > li ul li:last-child { border-bottom: none; } ul.navigation-menu > li ul li:hover { background-color: #a3c4e9; } ul.navigation-menu > li ul li:active { background-color: #93b4d9; } ul.navigation-menu > li:hover { background-color: #a3c4e9; } ul.navigation-menu > li:hover ul { -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; opacity: 1; height: auto; } ul.navigation-menu > li:hover ul li { height: auto; } ul.navigation-menu > li:active { background-color: #93b4d9; }