Team:Peking/RightBar
From 2010.igem.org
(Difference between revisions)
(3 intermediate revisions not shown) | |||
Line 51: | Line 51: | ||
</html> | </html> | ||
+ | |||
<div id="sidebar"> | <div id="sidebar"> | ||
Line 63: | Line 64: | ||
<hr size=4px width=172px color=00009f> | <hr size=4px width=172px color=00009f> | ||
<font size=3><font color=00009f><b><i>Sponsors</i></b></font></font> | <font size=3><font color=00009f><b><i>Sponsors</i></b></font></font> | ||
- | |||
- | |||
<center><html><a href = "http://ctb.pku.edu.cn/main/en/index.htm"><img src="https://static.igem.org/mediawiki/2010/5/52/CTBbanner.gif" width="172px"></a></html></center> | <center><html><a href = "http://ctb.pku.edu.cn/main/en/index.htm"><img src="https://static.igem.org/mediawiki/2010/5/52/CTBbanner.gif" width="172px"></a></html></center> | ||
Line 70: | Line 69: | ||
<div id="lsidebar"> | <div id="lsidebar"> | ||
+ | <!--the start of the hover menu navigation--> | ||
+ | <!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"--> | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
+ | <head> | ||
+ | <title> color changing hover meau navigation</title> | ||
+ | <meta http-equiv="content-type" content="text/html;charset=gb2312"> | ||
+ | <!--Add the following codes between <head> and </head>--> | ||
+ | <style type="text/css"> | ||
+ | *{margin:0;padding:0;color:#000000;} | ||
+ | body{font:12px 楷体_GB2312;} | ||
+ | #nav{ | ||
+ | margin:5px; | ||
+ | } | ||
+ | #nav li{ | ||
+ | position:relative; | ||
+ | list-style:none; | ||
+ | width:100px;/*change the width*/ | ||
+ | } | ||
+ | #nav li a{ | ||
+ | background:#ccc; | ||
+ | padding:5px; | ||
+ | width:100px; | ||
+ | border-top:1px solid #ccc; | ||
+ | text-decoration:none; | ||
+ | height:25px; | ||
+ | display:block; | ||
+ | text-align:center;line-height:25px; | ||
+ | } | ||
+ | #nav li a:hover{ | ||
+ | background:#FFCC00;line-height:25px;height:25px; | ||
+ | } | ||
+ | #nav ul ul{ | ||
+ | position:absolute; | ||
+ | top:36px; | ||
+ | left:0px; | ||
+ | visibility:hidden; | ||
+ | } | ||
+ | #nav ul :hover ul{ | ||
+ | visibility:visible; | ||
+ | } | ||
+ | #nav ul ul li a{ | ||
+ | display:block; | ||
+ | width:100px; | ||
+ | margin:0; | ||
+ | height:25px; | ||
+ | } | ||
+ | #nav table{ | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | } | ||
+ | hr{ | ||
+ | display:none; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <!--Add the following codes between <body> and </body>--> | ||
+ | <div id="Project Overview"> | ||
+ | |||
+ | <hr size=4px width=172px color=00009f> | ||
+ | <font size=3><font color=00009f><b><i>Project Overview</i></b></font></font> | ||
+ | <br> | ||
+ | |||
+ | <div id="nav"> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <a href="#">Overview | ||
+ | <!--[if IE 7]><!--></a><!--<![endif]--> | ||
+ | <!--[if lte IE 6]><table cellspacing="0"><tr><td><![endif]--> | ||
+ | <ul> | ||
+ | <li><a href="#">Team</a></li> | ||
+ | <li><a href="#">Project</a></li> | ||
+ | <li><a href="#">Modelling</a></li> | ||
+ | <li><a href="#">blabla</a></li> | ||
+ | </ul> | ||
+ | <!--[if lte IE 6]></td></tr></table></a><![endif]--> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <hr> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | <!-- the end of the HMN--> | ||
+ | |||
+ | |||
+ | |||
<hr size=4px width=172px color=00009f> | <hr size=4px width=172px color=00009f> |
Latest revision as of 08:09, 10 July 2010