Template:Tokyotechmenudark

From 2013.igem.org

(Difference between revisions)
Line 288: Line 288:
margin-bottom: 0em;
margin-bottom: 0em;
}
}
-
.qmmc .qmdivider {
+
#dropmenu {
-
display: block;
+
  list-style: none;
-
font-size: 3px;
+
  align: left ;
-
border-width: 0px;
+
  width: 980px;
-
border-style: solid;
+
  height: 40px;
-
}
+
  margin: 30px 
-
.qmmc .qmdividery {
+
  padding: 0px;
-
float: left;
+
  background: #000000;
-
width: 0px;
+
}
-
}
+
#dropmenu li {
-
.qmmc .qmtitle {
+
  position: relative;
-
display: block;
+
  width: 140px;
-
cursor: default;
+
  float: left;
-
white-space: nowrap;
+
  margin: 0px;
-
}
+
  padding: 0;
-
.qmclear {
+
  text-align: center;
-
font-size: 3px;
+
  　
-
height: 0px;
+
}
-
width: 0px;
+
 
-
clear: left;
+
#dropmenu li a {
-
line-height: 0px;
+
  display: block;
-
display: block;
+
  margin: 0;
-
float: none !important;
+
  padding: 3px 12px 3px 12px;
-
}
+
  color: #ffffff;
-
.qmmc {
+
  font-size: 15px;
-
position: relative;
+
  font-weight: bold ;
-
zoom: 1;
+
  line-height: 0.8;
-
background-color: #000000;
+
  text-decoration: none;
-
}
+
}
-
.qmmc a, .qmmc li {
+
#dropmenu li:hover > a{
-
float: left;
+
  background: #68be8d;
-
display: block;
+
  color:#000000;
-
white-space: nowrap;
+
}
-
}
+
-
.qmmc div a, .qmmc ul a, .qmmc ul li {
+
-
float: none;
+
-
}
+
-
.qmsh div a {
+
-
float: center;
+
-
}
+
-
.qmmc div {
+
-
visibility: hidden;
+
-
position: absolute;
+
-
}
+
-
.qmmc ul {
+
-
left: -10000px;
+
-
position: absolute;
+
-
}
+
-
.qmmc, .qmmc ul {
+
-
list-style: none;
+
-
}
+
#dropmenu li ul {
-
.qmmc li a {
+
  position: absolute;
-
float: none;
+
  top: 100%;
-
text-align: center;
+
  left: 0;
-
}
+
  list-style: none;
-
.qmmc li {
+
  margin: 0;
-
position: relative;
+
}
-
}
+
-
.qmmc ul {
+
-
z-index: 10;
+
-
}
+
-
.qmmc ul ul {
+
-
z-index: 20;
+
-
}
+
-
.qmmc ul ul ul {
+
-
z-index: 30;
+
-
}
+
-
.qmmc ul ul ul ul {
+
-
z-index: 40;
+
-
}
+
-
.qmmc ul ul ul ul ul {
+
-
z-index: 50;
+
-
}
+
-
li:hover > ul {
+
-
left: auto;
+
-
}
+
-
#qm0 ul {
+
-
top: 100%;
+
-
}
+
-
#qm0 ul li:hover > ul {
+
-
top: 0px;
+
-
left: 100%;
+
-
}
+
-
/*"""""""" (MAIN) Container""""""""*/
 
-
#qm0 {
 
-
background-color: #000000;
 
-
}
 
-
/*"""""""" (MAIN) Items""""""""*/
+
#dropmenu li ul li{
-
#qm0 a {
+
  overflow: hidden;
-
padding: 3px 12px 3px 12px;
+
  width: 280px;
-
background-color: #000000;
+
  height: 0px;
-
color: #ffffff;
+
  color: #000000;
-
font-family: Arial;
+
  -moz-transition: .2s;
-
font-size: 18px;
+
  -webkit-transition: .2s;
-
text-decoration: none;
+
  -o-transition: .2s;
-
font-weight: bold;
+
  -ms-transition: .2s;
-
border-width: 0px;
+
  transition: .2s;
-
}
+
}
 +
#dropmenu li ul li a{
 +
  padding: 13px 15px;
 +
  background: #68be8d;
 +
  text-align: center;
 +
　font-size: 15px;
 +
  font-weight: bold;
 +
　
 +
}
-
/*"""""""" (MAIN) Hover State""""""""*/
 
-
#qm0 a:hover {
 
-
color: #000000;
 
-
background-color: #E7E5F0;
 
-
}
 
-
                        body #qm0 .qmparent2:hover{
 
-
background-color: #E7E5F0;
 
-
color: #e94709;
 
-
text-decoration: none;
 
-
border-color: #D8CE4A;
 
-
                        }
 
-
/*"""""""" (MAIN) Parent items""""""""*/
 
-
#qm0 .qmparent {
 
-
background-repeat: no-repeat;
 
-
background-position: 95% center;
 
-
}
 
-
/*"""""""" (MAIN) Active State""""""""*/
+
#dropmenu li:hover ul li{
-
body #qm0 .qmactive, body #qm0 .qmactive:hover {
+
  overflow: visible;
-
background-color: #E7E5F0;
+
  height: 35px;
-
color: #381D46;
+
  border-top: 0px solid #000000;
-
text-decoration: none;
+
  border-bottom: 0px solid #000000;
-
border-color: #D8CE4A;
+
}
-
}
+
 +
#dropmenu li:hover ul li:hover a{
 +
  background: #E7E5F0;
 +
  color:#00000
 +
}
-
/*"""""""" (SUB) Container""""""""*/
+
#dropmenu li:hover ul li:first-child{
-
#qm0 div, #qm0 ul {
+
  border-top: 0;
-
padding: 0px 10px;
+
}
-
background-color: #000000;
+
#dropmenu li:hover ul li:last-child{
-
border-width: 0px;
+
  border-bottom: 0;
-
}
+
}
-
#qm0 ul .qmswitch a{
+
-
color: #E5AAB6;
+
-
}
+
-
#qm0 ul .qmm13 a{
+
-
color: #A0CDE8;
+
-
}
+
-
#qm0 ul .qmfarming a{
+
-
color: #BFD4A5;
+
-
}
+
-
 
+
-
/*"""""""" (SUB) Items""""""""*/
+
-
#qm0 div a, #qm0 ul a {
+
-
padding: 3px 3px 3px 5px;
+
-
color: #FFFFFF;
+
-
font-size: 16px;
+
-
font-weight: normal;
+
-
font-weight: bold;
+
-
border-width: 0px;
+
-
}
+
-
 
+
-
/*"""""""" (SUB) Hover State""""""""*/
+
-
#qm0 div a:hover, #qm0 ul a:hover {
+
-
background-color: #E7E5F0;
+
-
color: #e94709;
+
-
text-decoration: none;
+
-
}
+
-
#qm0 ul .qmswitch a:hover{
+
-
color: #99003E;
+
-
}
+
-
#qm0 ul .qmm13 a:hover{
+
-
color: #135498;
+
-
}
+
-
#qm0 ul .qmfarming a:hover{
+
-
color: #005234;
+
-
}
+
-
 
+
-
/*"""""""" (SUB) Parent items""""""""*/
+
-
#qm0 div .qmparent {
+
-
background-image: url("images/arrow_right.gif");
+
-
}
+
-
 
+
-
/*"""""""" (SUB) Active State""""""""*/
+
-
body #qm0 div .qmactive, body #qm0 div .qmactive:hover {
+
-
background-color: #f8b500;
+
-
color: #000000;
+
-
}
+
</style>
</style>
</head>
</head>
Line 479: Line 381:
<a style="position:absolute; top:30px; left:60%;" href="https://2013.igem.org/Main_Page"><b><img src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png" width="100px"></b></a>
<a style="position:absolute; top:30px; left:60%;" href="https://2013.igem.org/Main_Page"><b><img src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png" width="100px"></b></a>
<div id="pagemenu">
<div id="pagemenu">
-
<ul id="qm0" class="qmmc">
+
<ul id="dropmenu" class="qmmc">
<li>
<li>
<a class="qmparent2" href="https://2013.igem.org/Team:Tokyo_Tech">Home</a>
<a class="qmparent2" href="https://2013.igem.org/Team:Tokyo_Tech">Home</a>

Revision as of 15:22, 26 October 2013

Retrieved from "http://2013.igem.org/Template:Tokyotechmenudark"