Template:Team:TMU-Tokyo/drop-menu.css

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <style> #dropmenu { list-style-type: none; width: 800px; height: 40px; margin: 30px auto 300px; padding: 0; background: #8a9b0f; border-bottom: 5px solid #5...")
Line 1: Line 1:
-
<html>
+
<style>
-
<style>
+
#dropmenu {
#dropmenu {
   list-style-type: none;
   list-style-type: none;
Line 83: Line 82:
     </style>
     </style>
 +
<html>
 +
<body>
 +
 +
<body>
 +
 +
<ul id="dropmenu">
 +
  <li><a href="#">Home</a>
 +
   
 +
    </li>
 +
  <li><a href="#">Team</a>
 +
   
 +
  </li>
 +
  <li><a href="#">Project</a>
 +
    <ul>
 +
      <li><a href="#">overvew</a></li>
 +
      <li><a href="#">parts</a></li>
 +
      <li><a href="#">backbone</a></li>
 +
    </ul>
 +
  </li>
 +
  <li><a href="#">Human Practice</a>
 +
    <ul>
 +
    </ul>
 +
  </li>
 +
  <li><a href="#">Safety</a>
 +
    </li>
 +
  <li><a href="#">Note</a>
 +
    <ul>
 +
      <li><a href="#">Protocol</a></li>
 +
    </ul>
 +
 +
  </li>
 +
</ul>
 +
 +
</style>
</html>
</html>

Revision as of 03:56, 4 September 2013

<style>

  1. dropmenu { 
 list-style-type: none;
 width: 800px;
 height: 40px;
 margin: 30px auto 300px;
 padding: 0;
 background: #8a9b0f;
 border-bottom: 5px solid #535d09;
 border-radius: 3px 3px 0 0;

}

  1. dropmenu li { 
 position: relative;
 width: 16.6%;
 float: left;
 margin: 0;
 padding: 0;
 text-align: center;

}

  1. dropmenu li a { 
 display: block;
 margin: 0;
 padding: 15px 0 11px;
 color: #fff;
 font-size: 14px;
 font-weight: bold;
 line-height: 1;
 text-decoration: none;

}

  1. dropmenu li:hover > a{ 
 background: #6e7c0c;
 color: #eff7b1;

}

  1. dropmenu > li:hover > a{ 
 border-radius: 3px 3px 0 0;

}

  1. dropmenu li ul { 
 position: absolute;
 top: 100%;
 left: 0;
 list-style: none;
 margin: 0;
 border-radius: 0 0 3px 3px;

}

  1. dropmenu li:last-child ul { 
 left: -100%;
 width: 100%

}

  1. dropmenu li ul li{ 
 overflow: hidden;
 width: 200%;
 height: 0;
 color: #fff;
 -moz-transition: .2s;
 -webkit-transition: .2s;
 -o-transition: .2s;
 -ms-transition: .2s;
 transition: .2s;

}

  1. dropmenu li ul li a{ 
 padding: 13px 15px;
 background: #6e7c0c;
 text-align: left;
 font-size: 12px;
 font-weight: normal;

}

  1. dropmenu li:hover ul li{ 
 overflow: visible;
 height: 38px;
 border-top: 1px solid #7c8c0e;
 border-bottom: 1px solid #616d0b;

}

  1. dropmenu li:hover ul li:first-child{ 
 border-top: 0;

}

  1. dropmenu li:hover ul li:last-child{ 
 border-bottom: 0;

}

  1. dropmenu li:hover ul li:last-child a{ 
 border-radius: 0 0 3px 3px;

} 

   </style>

Retrieved from "http://2013.igem.org/Template:Team:TMU-Tokyo/drop-menu.css"