|
|
| Line 4: |
Line 4: |
| | <script src="https://2017.igem.org/Team:William_and_Mary/jquery1-20?action=raw&ctype=text/javascript" type="text/javascript"></script> | | <script src="https://2017.igem.org/Team:William_and_Mary/jquery1-20?action=raw&ctype=text/javascript" type="text/javascript"></script> |
| | <style> | | <style> |
| − | | + | .dropdown { |
| − | #menu, #menu ul {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | list-style: none;
| + | |
| − | z-index:999;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu {
| + | |
| − | width: 960px;
| + | |
| − | margin: 60px auto;
| + | |
| − | border: 1px solid #222;
| + | |
| − | background-color: #111;
| + | |
| − | background-image: linear-gradient(#444, #111);
| + | |
| − | border-radius: 6px;
| + | |
| − | box-shadow: 0 1px 1px #777;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu:before,
| + | |
| − | #menu:after {
| + | |
| − | content: "";
| + | |
| − | display: table;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu:after {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu {
| + | |
| − | zoom:1;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu li {
| + | |
| − | float: left;
| + | |
| − | border-right: 1px solid #222;
| + | |
| − | box-shadow: 1px 0 0 #444;
| + | |
| | position: relative; | | position: relative; |
| | + | display: inline-block; |
| | } | | } |
| | | | |
| − | #menu a {
| + | .dropdown-content { |
| − | float: left; | + | display: none; |
| − | padding: 12px 30px;
| + | |
| − | color: #999;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font: bold 12px Arial, Helvetica;
| + | |
| − | text-decoration: none;
| + | |
| − | text-shadow: 0 1px 0 #000;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu li:hover > a {
| + | |
| − | color: #fafafa;
| + | |
| − | }
| + | |
| − | | + | |
| − | *html #menu li a:hover { /* IE6 only */
| + | |
| − | color: #fafafa;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu ul {
| + | |
| − | margin: 20px 0 0 0;
| + | |
| − | _margin: 0; /*IE6 only*/
| + | |
| − | opacity: 0;
| + | |
| − | visibility: hidden;
| + | |
| | position: absolute; | | position: absolute; |
| − | top: 38px; | + | background-color: #f9f9f9; |
| − | left: 0;
| + | min-width: 160px; |
| − | z-index: 1;
| + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); |
| − | background: #444;
| + | padding: 12px 16px; |
| − | background: linear-gradient(#444, #111); | + | z-index: 1; |
| − | box-shadow: 0 -1px 0 rgba(255,255,255,.3); | + | |
| − | border-radius: 3px; | + | |
| − | transition: all .2s ease-in-out; | + | |
| | } | | } |
| | | | |
| − | #menu li:hover > ul {
| + | .dropdown:hover .dropdown-content { |
| − | opacity: 1;
| + | |
| − | visibility: visible;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu ul ul {
| + | |
| − | top: 0;
| + | |
| − | left: 150px;
| + | |
| − | margin: 0 0 0 20px;
| + | |
| − | _margin: 0; /*IE6 only*/
| + | |
| − | box-shadow: -1px 0 0 rgba(255,255,255,.3);
| + | |
| − | }
| + | |
| − | | + | |
| − | #menu ul li {
| + | |
| − | float: none;
| + | |
| | display: block; | | display: block; |
| − | border: 0;
| |
| − | _line-height: 0; /*IE6 only*/
| |
| − | box-shadow: 0 1px 0 #111, 0 2px 0 #666;
| |
| | } | | } |
| − |
| |
| − | #menu ul li:last-child {
| |
| − | box-shadow: none;
| |
| − | }
| |
| − |
| |
| − | #menu ul a {
| |
| − | padding: 10px;
| |
| − | width: 130px;
| |
| − | _height: 10px; /*IE6 only*/
| |
| − | display: block;
| |
| − | white-space: nowrap;
| |
| − | float: none;
| |
| − | text-transform: none;
| |
| − | }
| |
| − |
| |
| − | #menu ul a:hover {
| |
| − | background-color: #0186ba;
| |
| − | background-image: linear-gradient(#04acec, #0186ba);
| |
| − | }
| |
| − |
| |
| − | #menu ul li:first-child > a {
| |
| − | border-radius: 3px 3px 0 0;
| |
| − | }
| |
| − |
| |
| − | #menu ul li:first-child > a:after {
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | left: 40px;
| |
| − | top: -6px;
| |
| − | border-left: 6px solid transparent;
| |
| − | border-right: 6px solid transparent;
| |
| − | border-bottom: 6px solid #444;
| |
| − | }
| |
| − |
| |
| − | #menu ul ul li:first-child a:after {
| |
| − | left: -6px;
| |
| − | top: 50%;
| |
| − | margin-top: -6px;
| |
| − | border-left: 0;
| |
| − | border-bottom: 6px solid transparent;
| |
| − | border-top: 6px solid transparent;
| |
| − | border-right: 6px solid #3b3b3b;
| |
| − | }
| |
| − |
| |
| − | #menu ul li:first-child a:hover:after {
| |
| − | border-bottom-color: #04acec;
| |
| − | }
| |
| − |
| |
| − | #menu ul ul li:first-child a:hover:after {
| |
| − | border-right-color: #0299d3;
| |
| − | border-bottom-color: transparent;
| |
| − | }
| |
| − |
| |
| − | #menu ul li:last-child > a {
| |
| − | border-radius: 0 0 3px 3px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| | </style> | | </style> |
| | | | |
| − | | + | <div class="dropdown"> |
| − | <ul id="menu"> | + | <span>Mouse over me</span> |
| − | <li><a href="#">Home</a></li>
| + | <div class="dropdown-content"> |
| − | <li>
| + | <p>Hello World!</p> |
| − | <a href="#">Categories</a>
| + | </div> |
| − | <ul>
| + | </div> |
| − | <li><a href="#">CSS</a></li>
| + | |
| − | <li><a href="#">Graphic design</a></li>
| + | |
| − | <li><a href="#">Development tools</a></li>
| + | |
| − | <li><a href="#">Web design</a></li>
| + | |
| − | </ul>
| + | |
| − | </li> | + | |
| − | <li><a href="#">Work</a></li>
| + | |
| − | <li><a href="#">About</a></li>
| + | |
| − | <li><a href="#">Contact</a></li>
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | | + | |
| | | | |
| | </html> | | </html> |
