Header

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<style type="text/css">
 
-
.wrapper1{
+
<style>
-
color: #44433f;
+
/*---- CROSS BROWSER DROPDOWN MENU ----*/
-
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
+
ul#nav {margin: 0 0 0 200px;}
-
margin: 0;
+
ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
-
padding: 4px 0 0;
+
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
-
}
+
ul.drop { position: relative; z-index: 597; float: left; }
-
 
+
ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
-
.wrapper1 a{
+
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
-
color: #E5F2FB;
+
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
-
text-decoration: none;
+
ul.drop ul li { float: none; }
-
}
+
ul.drop ul ul { top: -2px; left: 100%; }
-
 
+
ul.drop li:hover > ul { visibility: visible }
-
.wrapper1 a:hover {
+
-
color: #09548B;
+
-
}
+
-
 
+
-
.wrapper1 p {
+
-
margin: 0 0 17px;
+
-
padding: 0;
+
-
line-height: 18px;
+
-
}
+
-
 
+
-
.wrapper {
+
-
/*width: 710px;*/
+
-
margin: 20px auto;
+
-
}
+
-
 
+
-
.nav {
+
-
background: #fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmFxQxnOI/AAAAAAAAAHo/WeNb4h2lTcY/s1600/nav_bg.png) repeat-x;
+
-
 
+
-
float: left;
+
-
 
+
-
}
+
-
 
+
-
.nev-wrapper {
+
-
clear: both;
+
-
float: left;
+
-
 
+
-
}
+
-
 
+
-
.nav-left {
+
-
 
+
-
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmHgvXrfI/AAAAAAAAAHs/0C36haanf_o/s1600/nav_left.png) no-repeat top left;
+
-
 
+
-
float: left;
+
-
 
+
-
width: 11px;
+
-
 
+
-
height: 41px;
+
-
 
+
-
}
+
-
 
+
-
.nav-right {
+
-
 
+
-
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmIzag1WI/AAAAAAAAAHw/qNqgaojq4OI/s1600/nav_right.png) no-repeat top right;
+
-
 
+
-
float: left;
+
-
 
+
-
width: 11px;
+
-
 
+
-
height: 41px;
+
-
 
+
-
}
+
-
 
+
-
.nav ul {
+
-
 
+
-
/*width: 648px;*/
+
-
 
+
-
height: 38px;
+
-
 
+
-
float: left;
+
-
 
+
-
margin: 0;
+
-
 
+
-
padding-top: 3px;
+
-
 
+
-
list-style: none;
+
-
 
+
-
font-size: 15px;
+
-
 
+
-
}
+
-
 
+
-
.nav li {
+
-
 
+
-
float: left;
+
-
 
+
-
padding: 0 7px;
+
-
 
+
-
background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmP8wgFmI/AAAAAAAAAIA/wdf4DZhsFKg/s1600/split.png) no-repeat right center;
+
-
 
+
-
position: relative;
+
-
 
+
-
z-index: 1;
+
-
 
+
-
}
+
-
 
+
-
.nav li.last {
+
-
 
+
-
background:none;
+
-
 
+
-
}
+
-
 
+
-
.nav li:hover {
+
-
 
+
-
z-index:2;
+
-
 
+
-
}
+
-
 
+
-
.nav li a {
+
-
 
+
-
display: block;
+
-
 
+
-
line-height: 38px;
+
-
 
+
-
overflow: hidden;
+
-
 
+
-
float: left;
+
-
 
+
-
}
+
-
 
+
-
a .menu-left {
+
-
 
+
-
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsl3yDJRkI/AAAAAAAAAHQ/hZkoiBamxso/s1600/menu_left.gif) no-repeat left top;
+
-
 
+
-
width: 8px;
+
-
 
+
-
height: 32px;
+
-
 
+
-
line-height: 35px;
+
-
 
+
-
display: block;
+
-
 
+
-
float: left;
+
-
 
+
-
}
+
-
 
+
-
a .menu-mid {
+
-
 
+
-
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsl7c8ppBI/AAAAAAAAAHY/hxR8ObxBYmo/s1600/menu_mid.gif) repeat-x top left;
+
-
 
+
-
height: 32px;
+
-
 
+
-
line-height: 35px;
+
-
 
+
-
display: block;
+
-
 
+
-
float: left;
+
-
 
+
-
}
+
-
 
+
-
a .menu-right {
+
-
 
+
-
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmCJ3D5iI/AAAAAAAAAHg/0y7-Wpz4C2o/s1600/menu_right.gif) no-repeat top left;
+
-
 
+
-
width: 8px;
+
-
 
+
-
height: 32px;
+
-
 
+
-
line-height: 35px;
+
-
 
+
-
display: block;
+
-
 
+
-
float: left;
+
-
 
+
-
}
+
-
 
+
-
.nav li a:hover .menu-left,
+
-
 
+
-
.nav li.active a .menu-left,
+
-
 
+
-
.nav li:hover a .menu-left,
+
-
 
+
-
.nav li a:hover .menu-mid,
+
-
 
+
-
.nav li.active a .menu-mid,
+
-
 
+
-
.nav li:hover a .menu-mid,
+
-
 
+
-
.nav li a:hover .menu-right,
+
-
 
+
-
.nav li.active a .menu-right,
+
-
 
+
-
.nav li:hover a .menu-right {
+
-
 
+
-
background-position: 0 -37px;
+
-
 
+
-
line-height: 35px;
+
-
 
+
-
}
+
-
 
+
-
.nav li a:hover,
+
-
 
+
-
.nav li.active a,
+
-
 
+
-
.nav li.hover a,
+
-
 
+
-
.nav li:hover a {
+
-
 
+
-
color: #09548B;
+
-
 
+
-
}
+
-
 
+
-
.nav li:hover .sub,
+
-
 
+
-
.nav li.hover .sub {
+
-
 
+
-
display:block;
+
-
 
+
-
}
+
-
 
+
-
.nav li .sub {
+
-
 
+
-
display: none;
+
-
 
+
-
position: absolute;
+
-
 
+
-
top: 27px;
+
-
 
+
-
left: 6px;
+
-
 
+
-
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmUJr-yhI/AAAAAAAAAIM/OihvjAeTyG8/s1600/submenu_top.png) no-repeat;
+
-
 
+
-
width: 186px;
+
-
 
+
-
padding-top: 9px;
+
-
 
+
-
}
+
-
 
+
-
.nav li ul {
+
-
 
+
-
background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmRpDHDsI/AAAAAAAAAIE/ADndeR5TGu8/s1600/submenu_bg.png) repeat-y;
+
-
 
+
-
width: 162px;
+
-
 
+
-
height: auto;
+
-
 
+
-
margin: 0;
+
-
 
+
-
padding: 0 12px 10px;
+
-
 
+
-
list-style: none;
+
-
 
+
-
font-size: 14px;
+
-
 
+
-
}
+
-
 
+
-
 
+
-
 
+
-
.nav li:hover li,
+
-
 
+
-
.nav li.active li {
+
-
 
+
-
width: 100%;
+
-
 
+
-
padding: 1px 0 2px;
+
-
 
+
-
border-bottom: 1px #C1D9F0 dashed;
+
-
 
+
-
background: none !important;
+
-
 
+
-
}
+
-
 
+
-
.nav li:hover li a,
+
-
 
+
-
.nav li.active li a {
+
-
 
+
-
color: #09548B;
+
-
 
+
-
background: none !important;
+
-
 
+
-
line-height: normal;
+
-
 
+
-
width: 156px;
+
-
 
+
-
padding: 8px 3px 3px;
+
-
 
+
-
text-indent: 1px;
+
-
 
+
-
}
+
-
 
+
-
.nav li:hover li a:hover,
+
-
 
+
-
.nav li.active li a:hover {
+
-
 
+
-
color: #fff;
+
-
 
+
-
background: #165B9F !important;
+
-
 
+
-
text-decoration: none;
+
-
 
+
-
line-height: normal;
+
-
 
+
-
}
+
-
 
+
-
/*IE*/
+
-
 
+
-
.nav li li a:hover,
+
-
 
+
-
.nav li li a:hover {
+
-
 
+
-
color: #fff;
+
-
 
+
-
background: #165B9F !important;
+
-
 
+
-
text-decoration: none;
+
-
 
+
-
line-height: normal;
+
-
 
+
-
}
+
-
 
+
-
/**/
+
-
 
+
-
.nav .btm-bg {
+
-
 
+
-
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmS3dJfYI/AAAAAAAAAII/h8j3-QE6ElE/s1600/submenu_bottom.png) no-repeat;
+
-
 
+
-
width: 205px;
+
-
 
+
-
height: 9px;
+
-
 
+
-
overflow: hidden;
+
-
 
+
-
clear: both;
+
-
 
+
-
}
+
-
 
+
-
.content {
+
-
 
+
-
width: 670px;
+
-
 
+
-
background: transparent url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQslwVgdWcI/AAAAAAAAAHA/hPtWaiguCKQ/s1600/content_bg.png) repeat-y;
+
-
 
+
-
float: left;
+
-
 
+
-
padding: 10px 20px;
+
-
 
+
-
}
+
-
 
+
-
.content h1 {
+
-
 
+
-
color: #333;
+
-
 
+
-
font-weight: 400;
+
-
 
+
-
text-transform: uppercase;
+
-
 
+
-
font-size: 18px;
+
-
 
+
-
border-bottom: 1px dashed #C1D9F0;
+
-
 
+
-
}
+
-
 
+
-
.content h2 {
+
-
 
+
-
font-weight: 400;
+
-
 
+
-
text-transform: uppercase;
+
-
 
+
-
font-size: 14px;
+
-
 
+
-
padding-left: 10px;
+
-
 
+
-
margin-bottom: -5px;
+
-
 
+
-
}
+
-
 
+
-
.content p {
+
-
 
+
-
padding: 0 15px;
+
-
 
+
-
text-align: justify;
+
-
 
+
-
}
+
-
 
+
-
.content-bottom {
+
-
 
+
-
width: 710px;
+
-
 
+
-
background: transparent url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQslyLtUh4I/AAAAAAAAAHE/KjmSaXhHWuw/s1600/content_bottom.png) no-repeat;
+
-
 
+
-
height: 13px;
+
-
 
+
-
float: left;
+
-
 
+
-
}
+
</style>
</style>
-
<div class="wrapper1">
+
<body>
-
 
+
<ul id="nav" class="drop">
-
<div class="wrapper">
+
  <li><a href="#">Home</a></li>
-
 
+
  <li>About Us
-
<div class="nav-wrapper">
+
    <ul>
-
 
+
      <li><a href="#">History</a></li>
-
<div class="nav-left"></div>
+
      <li><a href="#">Clients</a></li>
-
 
+
      <li><a href="#">Testimonials</a></li>
-
<div class="nav">
+
      <li><a href="#">Staff</a>
-
 
+
        <ul>
-
<ul id="navigation">
+
          <li><a href="#">George Orsmond</a>
-
 
+
            <ul>
-
<li class="active">
+
              <li>Web Design</li>
-
 
+
              <li>Graphic Design</li>
-
<a href="#">
+
              <li>HTML</li>
-
 
+
              <li>CSS</li>
-
<span class="menu-left"></span>
+
            </ul>
-
 
+
          </li>
-
<span class="menu-mid">Home</span>
+
          <li><a href="#">Dave Macleod</a></li>
-
 
+
        </ul>
-
<span class="menu-right"></span>
+
      </li>
-
 
+
      <li><a href="#">FAQs</a></li>
-
</a>
+
    </ul>
-
 
+
  </li>
-
</li>
+
  <li>Services
-
 
+
    <ul>
-
<li class="">
+
      <li><a href="#">Web Design</a></li>
-
 
+
      <li><a href="#">Graphic Design</a></li>
-
<a href="#">
+
      <li><a href="#">Logo Design</a></li>
-
 
+
    </ul>
-
<span class="menu-left"></span>
+
  </li>
-
 
+
  <li>Products
-
<span class="menu-mid">Blog</span>
+
    <ul>
-
 
+
      <li class="dir"><a href="#">Templates</a></li>
-
<span class="menu-right"></span>
+
      <li class="dir"><a href="#">Stock Images</a>
-
 
+
        <ul>
-
</a>
+
          <li><a href="#">Category 1</a></li>
-
 
+
          <li><a href="#">Category 2</a></li>
-
<div class="sub">
+
          <li><a href="#">Category 3</a></li>
-
 
+
          <li><a href="#">Category 4</a></li>
-
<ul>
+
          <li><a href="#">Category 5</a></li>
-
 
+
        </ul>
-
<li>
+
      </li>
-
 
+
      <li><a href="#">Featured</a></li>
-
<a href="#">Archives</a>
+
      <li><a href="#">Top Rated</a></li>
-
 
+
      <li><a href="#">Resources</a></li>
-
</li>
+
    </ul>
-
 
+
  </li>
-
<li>
+
  <li><a href="#">Gallery</a></li>
-
 
+
  <li>Contact Us
-
<a href="#">Categories</a>
+
    <ul>
-
 
+
      <li><a href="#">Contact Form</a></li>
-
</li>
+
      <li><a href="#">How to get here</a></li>
-
 
+
      <li><a href="#">View the map</a></li>
-
<li>
+
    </ul>
-
 
+
  </li>
-
<a href="#">Top-rated Posts</a>
+
-
 
+
-
</li>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Most-viewed Entries</a>
+
-
 
+
-
</li>
+
-
 
+
</ul>
</ul>
-
<div class="btm-bg"></div>
+
</body>
-
 
+
-
</div>
+
-
 
+
-
</li>
+
-
 
+
-
<li class="">
+
-
 
+
-
<a href="#">
+
-
 
+
-
<span class="menu-left"></span>
+
-
 
+
-
<span class="menu-mid">Development</span>
+
-
 
+
-
<span class="menu-right"></span>
+
-
 
+
-
</a>
+
-
 
+
-
<div class="sub">
+
-
 
+
-
<ul>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Wordpress Themes</a>
+
-
 
+
-
</li>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Wordpress Plugins</a>
+
-
 
+
-
</li>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Mac OS X</a>
+
-
 
+
-
</li>
+
-
 
+
-
</ul>
+
-
 
+
-
<div class="btm-bg"></div>
+
-
 
+
-
</div>
+
-
 
+
-
</li>
+
-
 
+
-
<li class="">
+
-
 
+
-
<a href="#">
+
-
 
+
-
<span class="menu-left"></span>
+
-
 
+
-
<span class="menu-mid">Tutorials</span>
+
-
 
+
-
<span class="menu-right"></span>
+
-
 
+
-
</a>
+
-
 
+
-
<div class="sub">
+
-
 
+
-
<ul>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Photoshop</a>
+
-
 
+
-
</li>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Illustrator</a>
+
-
 
+
-
</li>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Css, Html</a>
+
-
 
+
-
</li>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Post Your Tutorial!</a>
+
-
 
+
-
</li>
+
-
 
+
-
</ul>
+
-
 
+
-
<div class="btm-bg"></div>
+
-
 
+
-
</div>
+
-
 
+
-
</li>
+
-
 
+
-
<li class="">
+
-
 
+
-
<a href="#">
+
-
 
+
-
<span class="menu-left"></span>
+
-
 
+
-
<span class="menu-mid">Gallery</span>
+
-
 
+
-
<span class="menu-right"></span>
+
-
 
+
-
</a>
+
-
 
+
-
<div class="sub">
+
-
 
+
-
<ul>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">Personal Photos</a>
+
-
 
+
-
</li>
+
-
 
+
-
<li>
+
-
 
+
-
<a href="#">My Friends</a>
+
-
</li>
 
</html>
</html>

Revision as of 11:57, 17 April 2013

Retrieved from "http://2013.igem.org/Header"