ACCORDION MENU-4
.
.
.
.
.
<style>
.accordion {font:14px Arial;margin:0;border:1px solid #fbbb22;border-radius:5px; width:240px;padding:3px;background:#400030;color:#FFF;}
.accordion ul {list-style:none;margin:0;padding:0;}
.accordion li {background:#173377;color:#FFF;margin:0;padding:0;}
.accordion li a{color:#FFF;margin:0;padding:0px;}
.accordion li a:hover{background:#FFFF00;color:#000;margin:0;padding:0px;}
.accordion [type=radio], .accordion [type=checkbox] {display:none;}
.accordion label {display:block;font:14px arial;line-height:16px;background:#400030; border:1px solid #fbbb22;color:#FFF;cursor:pointer;-webkit-transition: all .2s ease-out;-moz-transition: all .2s ease-out;}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {background:#105105;color:#FFF;}
.accordion .content {padding:0 5px;overflow:hidden;border:1px solid #fbbb22;
-webkit-transition: all .5s ease-out;-moz-transition: all .5s ease-out;}
.accordion p {color:#FFF;margin:0 0 5px;}
.vertical ul li {overflow:hidden;margin:0 0 1px;}
.vertical ul li label {padding:5px;}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {border-bottom:0;}
.vertical ul li label:hover {border:1px solid #fbbb22;}
.vertical ul li .content {height:0px;border-top:0;}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content {height:auto;border:1px solid #fbbb22;}
</style>
<div class="accordion vertical">
<ul>
<li><input type="checkbox" id="checkbox-0" name="checkbox-accordion"/>
<label for="checkbox-0"><a href="http://the-best-widgets.blogspot.gr">HOME</a></label>
<li><input type="checkbox" id="checkbox-1" name="checkbox-accordion"/>
<label for="checkbox-1">MEGA MENUS ▼</label>
<div class="content">
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">MEGA MENU-1</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">MEGA MENU-2</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">MEGA MENU-3</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">MEGA MENU-4</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">MEGA MENU-5</a>
</div></li>
<li><input type="checkbox" id="checkbox-2" name="checkbox-accordion" />
<label for="checkbox-2">VECTRICAL MENUS ▼</label>
<div class="content">
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">VECTRICAL MENU-1</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">VECTRICAL MENU-2</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">VECTRICAL MENU-3</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">VECTRICAL MENU-4</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">VECTRICAL MENU-5</a>
</div></li>
<li><input type="checkbox" id="checkbox-3" name="checkbox-accordion" />
<label for="checkbox-3">ACCORDION MENUS ▼</label>
<div class="content">
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ACCORDION MENU-1</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ACCORDION MENU-2</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ACCORDION MENU-3</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ACCORDION MENU-4</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ACCORDION MENU-5</a>
</div></li>
<li><input type="checkbox" id="checkbox-4" name="checkbox-accordion" />
<label for="checkbox-4">HORIZONTAL MENUS ▼</label>
<div class="content">
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-1</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-2</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-3</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-4</a><br/>
<a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-5</a>
</div></li></ul></div>
