<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Task-test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="css/style2.css">
<script src="js/script2.js"></script>
<script src="js/validate2.js"></script>
</head>
<body>
<div class="page">
<div class="navigation">
<ul>
<li class="menu-nav">
<a class="Home a-nav active"> Home </a>
<div>
<ul class="list open">
<li class="submenu active" onclick="slider.first();">
Show slide 1
</li>
<li class="submenu" onclick="slider.second();">
Show slide 2
</li>
<li class="submenu" onclick="slider.third();">
Show slide 3
</li>
</ul>
</div>
</li>
<li class="menu-nav">
<a class="Register a-nav"> Register </a>
</li>
<li class="menu-nav">
<a class="About a-nav"> About </a>
</li>
</ul>
</div>
<div class="accordion">
<section id="one">
<h2 class="active Home"><a href="#one">Home</a></h2>
</section>
<section id="two">
<h2 class="Register"><a href="#two">Register</a></h2>
</section>
<section id="three">
<h2 class="About"><a href="#three">About</a></h2>
</section>
</div>
</div>
</body>
</html>
<style>
/*navigation*/
.navigation {
color: black;
width: 270px;
position: relative;
margin-top: 40px;
margin-bottom: 85px;
font-size: 0.9em;
}
.menu-nav {
padding: 0 5px 0 5px;
float: left;
font-family:sans-serif;
cursor: pointer;
position: relative;
}
.a-nav {
padding: 0 10px;
}
.list {
position: absolute;
width: 105px;
display: none;
}
.submenu {
text-transform: none;
line-height: 25px;
padding-left: 6px;
}
.submenu.active {
background: #b0c4de;
}
/*accordion*/
section {
display: block;
}
h2 {
display: block;
margin: 0;
background-color: aliceblue;
border: 1px solid #aaaaaa;
-o-border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.active {
background-color: #b0c4de;
}
.accordion {
background-color: #eee;
border: 1px solid #ccc;
width: 1280px;
padding: 10px;
margin: 50px auto;
-moz-box-shadow: 0 1px 0 #999;
-webkit-box-shadow: 0 1px 0 #999;
box-shadow: 0 1px 0 #999;
}
.accordion section {
border-bottom: 1px solid #aaaaaa;
background-color: #fff;
-o-border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.accordion h2 a {
display: block;
position: relative;
font: 14px/1 'Trebuchet MS', 'Lucida Sans', Arial, Helvetica;
padding: 5px 10px;
}
.accordion h2.active a:after {
content: '';
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-top: 5px solid #333;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.content {
border: 1px solid #aaaaaa;
}
.open {
display: block;
}
.close {
display: none;
}
</style>