Team:SJTU-Software2/test

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{CSS/Main}}
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html>
+
 
-
<head>
+
<HTML>
-
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
+
 
-
<title>无标题文档</title>
+
    <HEAD>
-
<style type="text/css">
+
 
-
body{
+
        <title>WebForm5</title>
-
    background-color:white;
+
 
-
    font-size:12px;
+
 
-
    font-family:Arial, Helvetica, sans-serif;
+
 
-
    margin:0px;
+
        <style>/* Root = Horizontal, Secondary = Vertical */
-
    padding:0px;
+
 
-
    color:white;
+
ul#navmenu-h {
 +
 
 +
  margin: 0;
 +
 
 +
  border: 0 none;
 +
 
 +
  padding: 0;
 +
 
 +
  width: 500px; /*For KHTML*/
 +
 
 +
  list-style: none;
 +
 
 +
  height: 24px;
 +
 
}
}
-
ul,li{
+
 
-
    margin:0px;
+
 
-
    padding:0px;
+
 
 +
ul#navmenu-h li {
 +
 
 +
  margin: 0;
 +
 
 +
  border: 0 none;
 +
 
 +
  padding: 0;
 +
 
 +
  float: left; /*For Gecko*/
 +
 
 +
  display: inline;
 +
 
 +
  list-style: none;
 +
 
 +
  position: relative;
 +
 
 +
  height: 24px;
 +
 
}
}
-
li{
+
 
-
    display:inline;
+
 
-
    list-style:none;
+
 
-
    list-style-position:outside;
+
ul#navmenu-h ul {
-
    text-align:center;
+
 
-
    font-weight:bold;
+
  margin: 0;
-
    float:left;
+
 
 +
  border: 0 none;
 +
 
 +
  padding: 0;
 +
 
 +
  width: 160px;
 +
 
 +
  list-style: none;
 +
 
 +
  display: none;
 +
 
 +
  position: absolute;
 +
 
 +
  top: 24px;
 +
 
 +
  left: 0;
 +
 
}
}
-
a:link{
+
 
-
    color:#336601;
+
 
-
    text-decoration:none;
+
 
-
    float:left;
+
ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
-
    width:100px;
+
 
-
    padding:3px 5px 0px 5px;
+
  clear: both;
 +
 
 +
  display: block;
 +
 
 +
  font: 1px/0px serif;
 +
 
 +
  content: ".";
 +
 
 +
  height: 0;
 +
 
 +
  visibility: hidden;
 +
 
}
}
-
a:visited{
+
 
-
    color:#336601;
+
 
-
    text-decoration:none;
+
 
-
    float:left;
+
ul#navmenu-h ul li {
-
    padding:3px 5px 0px 5px;
+
 
-
    width:100px;
+
  width: 160px;
 +
 
 +
  float: left; /*For IE 7 lack of compliance*/
 +
 
 +
  display: block !important;
 +
 
 +
  display: inline; /*For IE*/
 +
 
}
}
-
a:hover{
+
 
-
    color:white;
+
 
-
    float:left;
+
 
-
    padding:3px 3px 0px 20px;
+
/* Root Menu */
-
    width:88px;
+
 
-
    text-decoration:none;
+
ul#navmenu-h a {
-
    background-color:#539D26;
+
 
 +
  border: 1px solid #FFF;
 +
 
 +
  border-right-color: #CCC;
 +
 
 +
  border-bottom-color: #CCC;
 +
 
 +
  padding: 0 6px;
 +
 
 +
  float: none !important; /*For Opera*/
 +
 
 +
  float: left; /*For IE*/
 +
 
 +
  display: block;
 +
 
 +
  background: #EEE;
 +
 
 +
  color: #666;
 +
 
 +
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
 +
 
 +
  text-decoration: none;
 +
 
 +
  height: auto !important;
 +
 
 +
  height: 1%; /*For IE*/
 +
 
}
}
-
a:active{
+
 
-
    color:white;
+
 
-
    float:left;
+
 
-
    padding:3px 3px 0px 20px;
+
/* Root Menu Hover Persistence */
-
    width:88px;
+
 
-
    text-decoration:none;
+
ul#navmenu-h a:hover,
-
    background-color:#BD06B4;
+
 
 +
ul#navmenu-h li:hover a,
 +
 
 +
ul#navmenu-h li.iehover a {
 +
 
 +
  background: #CCC;
 +
 
 +
  color: #FFF;
 +
 
}
}
-
#nav{
+
 
-
    width:600px;
+
 
-
    height:30px;
+
 
-
    border-bottom:0px;
+
/* 2nd Menu */
-
    padding:0px 5px;
+
 
-
    position:absolute;
+
ul#navmenu-h li:hover li a,
-
    z-index:1;
+
 
-
    left: 198px;
+
ul#navmenu-h li.iehover li a {
-
    top: 25px;
+
 
 +
  float: none;
 +
 
 +
  background: #EEE;
 +
 
 +
  color: #666;
 +
 
}
}
-
.list{
+
 
-
    line-height:20px;
+
 
-
    text-align:left;
+
 
-
    padding:4px;
+
/* 2nd Menu Hover Persistence */
-
    font-weight:normal;
+
 
 +
ul#navmenu-h li:hover li a:hover,
 +
 
 +
ul#navmenu-h li:hover li:hover a,
 +
 
 +
ul#navmenu-h li.iehover li a:hover,
 +
 
 +
ul#navmenu-h li.iehover li.iehover a {
 +
 
 +
  background: #CCC;
 +
 
 +
  color: #FFF;
 +
 
}
}
-
.menu1{
+
 
-
    width:120px;
+
 
-
    height:auto;
+
 
-
    margin:6px 4px 0px 0px;
+
/* 3rd Menu */
-
    border:1px solid #9CDD75;
+
 
-
    background-color:#F1FBEC;
+
ul#navmenu-h li:hover li:hover li a,
-
    color:#336601;
+
 
-
    padding:6px 0px 0px 0px;
+
ul#navmenu-h li.iehover li.iehover li a {
-
    cursor:hand;
+
 
-
    overflow-y:hidden;
+
  background: #EEE;
-
    filter:Alpha(opacity=70);
+
 
-
    -moz-opacity:0.7;
+
  color: #666;
 +
 
}
}
-
.menu2{
+
 
-
    width:120px;
+
 
-
    height:18px;
+
 
-
    margin:6px 4px 0px 0px;
+
/* 3rd Menu Hover Persistence */
-
    background-color:#F5F5F5;
+
 
-
    color:#999900;
+
ul#navmenu-h li:hover li:hover li a:hover,
-
    border:1px solid #EEE8DD;
+
 
-
    padding:6px 0px 0px 0px;
+
ul#navmenu-h li:hover li:hover li:hover a,
-
    overflow-y:hidden;
+
 
-
    cursor:hand;
+
ul#navmenu-h li.iehover li.iehover li a:hover,
 +
 
 +
ul#navmenu-h li.iehover li.iehover li.iehover a {
 +
 
 +
  background: #CCC;
 +
 
 +
  color: #FFF;
 +
 
}
}
-
</style>
 
-
</head>
 
-
<body>
+
 
-
<div id="nav">
+
 
-
    <ul>
+
/* 4th Menu */
-
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页   
+
 
-
    <div class="list">
+
ul#navmenu-h li:hover li:hover li:hover li a,
-
        <a href="#">我爱CSS</a><br />
+
 
-
        <a href="#">我的首页</a><br />
+
ul#navmenu-h li.iehover li.iehover li.iehover li a {
-
        <a href="#">我的日志</a><br />
+
 
-
        <a href="#">我的日志</a><br />
+
  background: #EEE;
-
        <a href="#">我的相册</a><br />
+
 
-
        <a href="#">我的收藏</a><br />
+
  color: #666;
-
    </div>
+
 
-
    </li>
+
}
-
     <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
+
 
-
     <div class="list">
+
 
-
         <a href="#">我爱CSS</a><br />
+
 
-
         <a href="#">我的首页</a><br />
+
/* 4th Menu Hover */
-
        <a href="#">我的日志</a><br />
+
 
-
         <a href="#">我的相册</a><br />
+
ul#navmenu-h li:hover li:hover li:hover li a:hover,
-
         <a href="#">我的收藏</a><br />
+
 
-
     </div>
+
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
-
     </li>
+
 
-
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信    
+
  background: #CCC;
-
    <div class="list">
+
 
-
        <a href="#">我爱CSS</a><br />
+
  color: #FFF;
-
        <a href="#">我的相册</a><br />
+
 
-
        <a href="#">我的收藏</a><br />
+
}
-
    </div>
+
 
-
    </li>
+
 
-
    <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理   
+
 
-
    <div class="list">
+
ul#navmenu-h ul ul,
-
        <a href="#">我爱CSS</a><br />
+
 
-
        <a href="#">我的首页</a><br />
+
ul#navmenu-h ul ul ul {
-
        <a href="#">我的日志</a><br />
+
 
-
        <a href="#">我的相册</a><br />
+
  display: none;
-
        <a href="#">我的收藏</a><br />
+
 
-
        <a href="#">我的日志</a><br />
+
  position: absolute;
-
        <a href="#">我的相册</a><br />
+
 
-
        <a href="#">我的收藏</a><br />
+
  top: 0;
-
    </div>
+
 
-
    </li>
+
  left: 160px;
-
    </ul>
+
 
-
</div>
+
}
 +
 
 +
 
 +
 
 +
/* Do Not Move - Must Come Before display:block for Gecko */
 +
 
 +
ul#navmenu-h li:hover ul ul,
 +
 
 +
ul#navmenu-h li:hover ul ul ul,
 +
 
 +
ul#navmenu-h li.iehover ul ul,
 +
 
 +
ul#navmenu-h li.iehover ul ul ul {
 +
 
 +
  display: none;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
ul#navmenu-h li:hover ul,
 +
 
 +
ul#navmenu-h ul li:hover ul,
 +
 
 +
ul#navmenu-h ul ul li:hover ul,
 +
 
 +
ul#navmenu-h li.iehover ul,
 +
 
 +
ul#navmenu-h ul li.iehover ul,
 +
 
 +
ul#navmenu-h ul ul li.iehover ul {
 +
 
 +
  display: block;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
</style><script language="javascript">
 +
 
 +
navHover = function() {
 +
 
 +
     var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
 +
 
 +
     for (var i=0; i<lis.length; i++) {
 +
 
 +
         lis[i].onmouseover=function() {
 +
 
 +
            this.className+=" iehover";
 +
 
 +
         }
 +
 
 +
        lis[i].onmouseout=function() {
 +
 
 +
            this.className=this.className.replace(new RegExp(" iehover\\b"),
 +
 
 +
 
 +
 
 +
"");
 +
 
 +
         }
 +
 
 +
    }
 +
 
 +
}
 +
 
 +
if (window.attachEvent) window.attachEvent("onload", navHover);
 +
 
 +
         </script>
 +
 
 +
     </HEAD>
 +
 
 +
     <body>
 +
 
 +
  <ul id="navmenu-h">
 +
 
 +
   <li><a href="#">Root nav item1</a>
 +
 
 +
  <ul>
 +
 
 +
  <li><a href="#">Sub nav item1</a></li>
 +
 
 +
<li><a href="#">Sub nav item1-2</a></li>
 +
 
 +
  </ul>
 +
 
 +
  </li>
 +
 
 +
<li><a href="#">Root nav item2</a>
 +
 
 +
  <ul>
 +
 
 +
  <li><a href="#">Sub nav item2</a></li>
 +
 
 +
<li><a href="#">Sub nav item2-2</a></li>
 +
 
 +
  </ul>
 +
 
 +
  </li>
 +
 
 +
<li><a href="#">Root nav item3</a>
 +
 
 +
  <ul>
 +
 
 +
  <li><a href="#">Sub nav item3</a></li>
 +
 
 +
<li><a href="#">Sub nav item3-2</a></li>
 +
 
 +
  </ul>
 +
 
 +
  </li>
 +
 
 +
  </ul>
 +
 
</body>
</body>
 +
</html>
</html>

Revision as of 17:24, 11 October 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 



    

        WebForm5
Retrieved from "http://2014.igem.org/Team:SJTU-Software2/test"