Team:GeorgiaState/Test

From 2012.igem.org

(Difference between revisions)
 
(5 intermediate revisions not shown)
Line 1: Line 1:
-
<html><head>
+
<html>
-
<title>CSS DropDown Menu without JavaScript, PureCSS, Rollover</title>
+
<head>
-
<style type="text/css">
+
<title>Team:Georgia State University</title>
-
body { padding: 3em; }
+
-
#cssm1 *  { padding:0; margin: 0; font: 1em arial; }
+
<link href="http://dl.dropbox.com/u/23122618/styles.css" rel="stylesheet" type="text/css">
-
#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; }
 
-
#cssm1 a:hover { background: #789; }
 
 +
<div id='cssmenu'>
 +
<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{
 
-
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 {
+
<style type="text/css">
-
display:block;
+
-
}
+
-
#cssm1:hover ul li:hover ul li:hover ul {  
+
/*============the following section is for making collapsible text============*/
-
position: absolute;
+
.layer1 {
-
margin-left: 120px;
+
margin: 0;
-
margin-top: -20px;
+
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; }
-
</style>
+
</head>
 +
<body>
-
</head><body>
 
-
<div>
 
-
<h1>CSS DropDown/Rollover Menu without Javascript</h1>
 
-
</div>
 
-
<div id="cssm1">
+
</body>
-
<ul>
+
</html>
-
<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