Difference between revisions of "Team:elan vital korea"

Line 1: Line 1:
−
<html>
+
<html lang=''>
−
<style type="text/css">
+
<head>
−
nav ul ul {
+
  <meta charset='utf-8'>
−
display: none;
+
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
}
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="styles.css">
 +
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 +
  <script src="script.js"></script>
 +
</head>
 +
<body>
  
−
nav ul li:hover > ul {
+
<div id='cssmenu'>
−
display: block;
+
<ul>
−
}
+
  <li><a href='#'><span>Home</span></a></li>
−
nav ul {
+
  <li class='active has-sub'><a href='#'><span>Products</span></a>
−
background: #efefef;
+
      <ul>
−
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
+
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
−
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
+
            <ul>
−
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
+
              <li><a href='#'><span>Sub Product</span></a></li>
−
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
+
              <li class='last'><a href='#'><span>Sub Product</span></a></li>
−
padding: 0 20px;
+
            </ul>
−
border-radius: 10px; 
+
        </li>
−
list-style: none;
+
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
−
position: relative;
+
            <ul>
−
display: inline-table;
+
              <li><a href='#'><span>Sub Product</span></a></li>
−
}
+
              <li class='last'><a href='#'><span>Sub Product</span></a></li>
−
nav ul:after {
+
            </ul>
−
content: ""; clear: both; display: block;
+
        </li>
−
}
+
      </ul>
−
nav ul li {
+
  </li>
−
float: left;
+
  <li><a href='#'><span>About</span></a></li>
−
}
+
  <li class='last'><a href='#'><span>Contact</span></a></li>
−
nav ul li:hover {
+
</ul>
−
background: #4b545f;
+
</div>
−
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
+
−
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
+
−
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
+
−
}
+
−
nav ul li:hover a {
+
−
color: #fff;
+
−
}
+
−
+
−
nav ul li a {
+
−
display: block; padding: 25px 40px;
+
−
color: #757575; text-decoration: none;
+
−
}
+
−
nav ul ul {
+
−
background: #5f6975; border-radius: 0px; padding: 0;
+
−
position: absolute; top: 100%;
+
−
}
+
−
nav ul ul li {
+
−
float: none;
+
−
border-top: 1px solid #6b727c;
+
−
border-bottom: 1px solid #575f6a;
+
−
position: relative;
+
−
}
+
−
nav ul ul li a {
+
−
padding: 15px 40px;
+
−
color: #fff;
+
−
}
+
−
nav ul ul li a:hover {
+
−
background: #4b545f;
+
−
}
+
−
nav ul ul ul {
+
−
position: absolute; left: 100%; top:0;
+
−
}
+
  
−
</style>
+
</body>
−
 
+
<html>
−
<nav>
+
−
<ul>
+
−
<li><a href="#">Home</a></li>
+
−
<li><a href="#">Team</a></li>
+
−
<ul>
+
−
<li><a href="#">Members</a></li>
+
−
<li><a href="#">Attributions</a></li>
+
−
</ul>
+
−
 
+
−
<li><a href="#">Project</a></li>
+
−
<ul>
+
−
<li><a href="#">Project Overview</a></li>
+
−
<li><a href="#">Background Information</a></li>
+
−
<li><a href="#">Methods & Materials</a></li>
+
−
<ul>
+
−
<li><a href="#">Plasma Design</a></li>
+
−
<li><a href="#">Protocal</a></li>
+
−
</ul>
+
−
<li><a href="#">Result</a></li>
+
−
<li><a href="#">Future Plans</a></li>
+
−
</ul>
+
−
<li><a href="#">Weblab</a></li>
+
−
<ul>
+
−
<li><a href="#">Notebook</a></li>
+
−
<li><a href="#">Protocal</a></li>
+
−
<li><a href="#">Saftey</a></li>
+
−
</ul>
+
−
<li><a href="#">Human Practice</a></li>
+
−
<ul>
+
−
<li><a href="#">Focus</a></li>
+
−
<li><a href="#">Korea Youth Expo</a></li>
+
−
<li><a href="#">Education Public Awareness</a></li>
+
−
<li><a href="#">Policy Recommendations</a></li><li>
+
−
<li><a href="#">Blog</a></li>
+
−
<li><a href="#">Interview</a></li>
+
−
<li><a href="#">Regional Meet-ups</a></li>
+
−
<li><a href="#">Articles</a></li><li>
+
−
<li><a href="#">Video</a></li>
+
−
<li><a href="#">Presentations</a></li>
+
−
</ul>
+
−
<li><a href="#">iGEM Resource</a></li>
+
−
        <ul>
+
−
<li><a href="#">Medal Requirement</a></li>
+
−
<li><a href="#">Module Description</a></li>
+
−
</ul>
+
−
 
+
−
</ul>
+
−
</nav>
+
−
</html>
+

Revision as of 17:53, 25 August 2015