Team:GeorgiaState/Test

From 2012.igem.org

(Difference between revisions)
(Created page with " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html><head> <title>CSS DropDown Menu without JavaScript, PureCSS, Rollover</title>...")
 
(6 intermediate revisions not shown)
Line 1: Line 1:
 +
<html>
 +
<head>
 +
<title>Team:Georgia State University</title>
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
+
<link href="http://dl.dropbox.com/u/23122618/styles.css" rel="stylesheet" type="text/css">
-
<html><head>
+
-
<title>CSS DropDown Menu without JavaScript, PureCSS, Rollover</title>
+
-
<style type="text/css">
+
-
body { padding: 3em; }
+
-
#cssm1 *  { padding:0; margin: 0; font: 1em arial; }
 
-
#cssm1 { position: absolute;  z-index: 99; margin: 0 auto; float: left; line-height: 20px; }
 
-
#cssm1 a { display: block; border: 1px solid #fff; background: #abc; text-decoration: none; padding: 3px 10px; }
+
<div id='cssmenu'>
-
#cssm1 a:hover { background: #789; }
+
<ul>
 +
  <li class='active '><a href='index.html'><span>Home</span></a></li>
 +
  <li class='has-sub '><a href='#'><span>Our Team</span></a>
 +
      <ul>
 +
        <li class='has-sub '><a href='#'><span>Product 1</span></a>
 +
            <ul>
 +
              <li><a href='#'><span>Sub Item</span></a></li>
 +
              <li><a href='#'><span>Sub Item</span></a></li>
 +
            </ul>
 +
        </li>
 +
        <li class='has-sub '><a href='#'><span>Product 2</span></a>
 +
            <ul>
 +
              <li><a href='#'><span>Sub Item</span></a></li>
 +
              <li><a href='#'><span>Sub Item</span></a></li>
 +
            </ul>
 +
        </li>
 +
      </ul>
 +
  </li>
 +
  <li><a href='#'><span>About</span></a></li>
 +
  <li><a href='#'><span>Contact</span></a></li>
 +
</ul>
 +
</div>
-
#cssm1 ul li, #cssm1 ul li ul li  { width: 120px; list-style-type:none; }
 
-
#cssm1 ul li { float: left; width: 120px; }
 
-
#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{
+
<style type="text/css">
-
display:none;
+
-
list-style-type:none;
+
-
width: 120px;
+
-
}
+
-
#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {  
+
/*============the following section is for making collapsible text============*/
-
display:block;  
+
.layer1 {
-
}
+
margin: 0;
 +
padding: 0;
 +
width: 700px;
 +
}
 +
 +
.heading {
 +
margin: 1px;
 +
color: #fff;
 +
padding: 3px 10px;
 +
cursor: pointer;
 +
position: relative;
 +
background-color:black;
 +
text-align:center;
 +
}
 +
.content {
 +
padding: 5px 10px;
 +
background-color:#fafafa;
 +
}
 +
p { padding: 5px 0; }
-
#cssm1:hover ul li:hover ul li:hover ul {
 
-
position: absolute;
 
-
margin-left: 120px;
 
-
margin-top: -20px;
 
-
}
 
 +
</head>
 +
<body>
-
</style>
 
-
</head><body>
+
</body>
-
<div>
+
</html>
-
<h1>CSS DropDown/Rollover Menu without Javascript</h1>
+
-
<p>This is a dhtml menu like rollover menus with javascript. Tested with major web-browsers like Mozilla Firefox 3, Microsoft Internet Explorer 8, Opera 9.5, Google Chrome, Apple Safari, ...</p>
+
-
</div>
+
-
 
+
-
<div id="cssm1">
+
-
<ul>
+
-
<li><a href="http://www.cafewebmaster.com">Home</a></li>
+
-
<li><a href="#">Design &nbsp; &nbsp; &#187;</a>
+
-
<ul>
+
-
<li><a href="#">Graphics</a></li>
+
-
<li><a href="#">Themes &nbsp; &nbsp; &#187;</a>
+
-
<ul>
+
-
<li><a href="#">Joomla</a>
+
-
<li><a href="#">Drupal</a>
+
-
<li><a href="#">Wordpress</a>
+
-
</ul>
+
-
</li>
+
-
</ul>
+
-
+
-
</li>
+
-
<li><a href="#">Download</a></li>
+
-
<li><a href="#">Menus &nbsp; &nbsp;  &#187;</a>
+
-
<ul>
+
-
<li><a href="#">Javascript</a></li>
+
-
<li><a href="#">CSS &nbsp; &nbsp; &#187;</a>
+
-
<ul>
+
-
<li><a href="#">Left Menu</a>
+
-
<li><a href="#">DropDown</a>
+
-
<li><a href="#">...</a>
+
-
</ul>
+
-
</li>
+
-
</ul>
+
-
</li>
+
-
<li><a href="#">Contact</a></li>
+
-
<li><a href="#">...</a></li>
+
-
+
-
</ul>
+
-
</div>
+
-
</body></html>
+

Latest revision as of 14:56, 13 September 2012

Team:Georgia State University