<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="support-menu">
<nav class="vertical">
<ul class="menu">
<li>
<a href="#">
Categorias
</a>
<ul>
<li>
<a href="#">
General
</a>
</li>
<li>
<a href="#">
My Account
</a>
</li>
<li>
<a href="#">
Watching
</a>
</li>
<li>
<a href="#">
How To's
</a>
</li>
<li>
<a href="#">
Site Features
</a>
</li>
<li>
<a href="#">
Submissions
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Marcas
</a>
<ul>
<li>
<a href="#">
iOS
</a>
</li>
<li>
<a href="#">
Android
</a>
</li>
<li>
<a href="#">
Amazon
</a>
</li>
<li>
<a href="#">
Windows
</a>
</li>
<li>
<a href="#">
Chrome OS
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Noticias
</a>
<ul>
<li>
<a href="#">
Roku
</a>
</li>
<li>
<a href="#">
Amazon Fire TV
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Eventos
</a>
</li>
<li>
<a href="#">
Tienes dudas?
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
.support-menu * {
margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
div.support-menu {
margin: 20px auto;
width: 100%;
}
.support-menu nav.vertical {
border-radius: 4px;box-shadow: 0 0 10px rgba(0,0,0,.15);overflow: hidden;text-align: center;width: 100%;
}
.support-menu nav.vertical > ul {list-style-type: none;}
.support-menu nav.vertical > ul > li {display: block;}
.support-menu nav.vertical > ul > li ul{
display: none;
}
.support-menu nav.vertical > ul > li > a {background-color: rgb(157, 34, 60);background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));border-bottom: 1px solid rgba(255,255,255,.1);box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);color: rgb(255,255,255);display: block;font-size: .85rem;font-weight: 500;height: 50px;letter-spacing: .5rem;line-height: 50px;text-shadow: 0 1px 1px rgba(0,0,0,.1);text-transform: uppercase;transition: all .1s ease;text-decoration: none;}
.support-menu nav.vertical > ul > li > a:hover {
background-color: rgb(114, 51, 98);
background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
cursor: pointer;
}
.support-menu nav.vertical > ul > li > ul {background-color: rgb(255,255,255);}
.support-menu nav.vertical > ul > li > ul {list-style-type: none;}
.support-menu nav.vertical > ul > li > ul > li > a {background-color: rgb(255,255,255);border-bottom: 1px solid rgba(0,0,0,.05);color: #333331;display: block;font-size: 1.1rem;padding: 10px 0;text-decoration: none;transition: all 0.15s linear;}
.support-menu nav.vertical > ul > li > ul > li:hover > a {background-color: lightBlue;color: rgb(255,255,255);padding: 10px 0 10px 50px;}
$(document).ready(function(){
$('.menu li:has(ul)').hover(function(e){
e.preventDefault();
if ($(this).hasClass('activado')) {
$(this).removeClass('activado');
$(this).children('ul').slideUp();
}else{
$('.menu li ul').slideUp();
$('.menu li').removeClass('activado');
$(this).addClass('activado');
$(this).children('ul').slideDown();
}
});
});
