Team:Calgary/Sandbox

From 2010.igem.org

(Difference between revisions)
Line 3: Line 3:
<style>
<style>
-
#nav ul{
+
#nav {
 +
width: 900px;
 +
height: 250px ;
 +
background: url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png);
 +
margin: 10px auto;
padding: 0;
padding: 0;
 +
position: relative;
 +
}
 +
 +
 +
#nav li {
margin: 0;
margin: 0;
 +
padding: 0;
list-style: none;
list-style: none;
 +
position: absolute;
 +
top: 0;
}
}
-
#nav li{
+
#nav li, #nav a {
-
float: left;
+
height: 250px;
-
position: relative;
+
display: block;
-
width: 10em;
+
}
}
-
#nav li ul{
+
#homepanel {
-
display: none;
+
-
position: absolute;
+
-
top: 1em;
+
left: 0;
left: 0;
 +
width: 180px;
}
}
-
#nav li > ul {
+
#teampanel {
-
top: auto;
+
left: 181px;
-
left: auto;
+
width: 180px;
}
}
-
#nav li:hover ul {
+
#projectpanel {
-
display: block;
+
left: 361px;
 +
width: 180px;
}
}
-
</style>
+
#extraspanel {
 +
left: 541px;
 +
width: 180px;
 +
}
-
<body>
+
#sponsorspanel {
 +
left: 721px;
 +
width: 180px;
 +
}
-
<ul id="nav">
 
-
<li><a href="#">Menu 1</a>
 
-
<ul>
 
-
<li><a href="#">Submenu A</a></li>
 
-
<li><a href="#">Submenu B</a></li>
 
-
</ul>
 
-
</li>
 
-
<li><a href="#">Menu 2</a>
+
#homepanel a:hover {
-
<ul>
+
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) 0 -250px no-repeat;
-
<li><a href="#">Submenu C</a></li>
+
}
-
<li><a href="#">Submenu D</a></li>
+
-
<li><a href="#">Submenu E</a></li>
+
-
<li><a href="#">Submenu F</a></li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="#">Menu 3</a>
 
-
<ul>
 
-
<li><a href="#">Submenu G</a></li>
 
-
<li><a href="#">Submenu H</a></li>
 
-
<li><a href="#">Submenu I</a></li>
 
-
<li><a href="#">Submenu J</a></li>
 
-
<li><a href="#">Submenu K</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<li><a href="#">Menu 4</a>
+
#teampanel a:hover {
-
<ul>
+
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) -180px -250px no-repeat;
-
</ul>
+
}
-
</li>
+
 
 +
 
 +
#projectpanel a:hover {
 +
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) -360px -250px no-repeat;
 +
}
 +
 
 +
 
 +
#extraspanel a:hover {
 +
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) -540px -250px no-repeat;
 +
}
 +
 
 +
 
 +
#sponsorspanel a:hover {
 +
background: transparent url(http://i242.photobucket.com/albums/ff10/somerndmguy/image1.png) -720px -250px no-repeat;
 +
}
 +
 
 +
 
 +
</style>
 +
 
 +
 
 +
<body>
 +
 
 +
<ul id="nav">
 +
<li id="homepanel"><a href="#1"></a></li>
 +
<li id="teampanel"><a href="#2"></a></li>
 +
<li id="projectpanel"><a href="#3"></a></li>
 +
<li id="extraspanel"><a href="#4"></a></li>
 +
<li id="sponsorspanel"><a href="#5"></a></li>
</ul>
</ul>

Revision as of 20:37, 4 June 2010