Untitled

    <ul class="menu-list">

      <li class="active"><a>Football</a></li>

        <ul class="second-menu">

          <li class="active"><a>Serie A</a></li>

          <li><a>Premier League</a></li>

          <li><a>La Liga</a></li>

        </ul>

      <li><a>Tenis</a></li>

        <ul class="second-menu">

          <li class="active"><a>Serie A</a></li>

          <li><a>Premier League</a></li>

          <li><a>La Liga</a></li>

        </ul>

      <li><a>Basketball</a></li>

      <li><a>Hockey</a></li>

    </ul>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

* {

  margin: 0px;

  padding: 0px;

}

body {

  width: 100%;

  height: 100%;

  background-color: #4c5830;

  font-family: 'Rockwell',sans-serif;

}

ul.menu-list {

  width: 370px;

  margin:50px auto;

  list-style: none;

}

ul.menu-list > li {

  cursor: pointer;

  width: 100%;

  height: 60px;

  border-top: 2px solid #191b13;

  border-bottom: 2px solid #9e9e9e;

  color: #b1e220;

  list-style: none;

  font-size: 1.4em;

  line-height: 60px;

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,27,19,1)), color-stop(100%,rgba(37,37,37,1))); /* Chrome,Safari4+ */

}

ul.menu-list > li > a {

  display: block;

  -webkit-transition:all 0.3s ease;

  text-decoration: none;

  color: #b1e220;

  padding-left: 55px;

  margin-left: 20px;

}

ul.menu-list ul.second-menu {

  list-style: none;

  width: 100%;

  display: none;

}

ul.menu-list > li:hover > a {

  padding-left: 70px;

}

ul.menu-list > li.active > a{

  padding-left: 70px;

}

ul.menu-list > li.active + ul.second-menu {

  display: block;

}

ul.menu-list > li:nth-of-type(1) a {

  background: url('http://s12.postimg.org/z2hfjnpbt/football_icon.png') no-repeat left center;

}

ul.menu-list > li:nth-of-type(2) a {

  background: url('http://s18.postimg.org/uzopds105/tenis_icon.png') no-repeat left center;

}

ul.menu-list > li:nth-of-type(3) > a {

  background: url('http://s16.postimg.org/b8bat4hb5/basketball_icon.png') no-repeat left center;

}

ul.menu-list > li:nth-of-type(4) > a {

  background: url('http://s24.postimg.org/g005z8fmp/hockey_icon.png') no-repeat left center;

}

/*SECOND MENU */

ul.second-menu > li {

  line-height: 75px;

  height: 75px;

  border-top: 2px solid #191b13;

  border-bottom: 2px solid #9e9e9e;

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(99,99,99,1)), color-stop(100%,rgba(85,85,85,1))); /* Chrome,Safari4+ */

}

ul.second-menu > li > a {

  text-decoration: none;

  display: block;

  -webkit-transition:all 0.3s ease;

  color: #e5e6e5;

  font-size: 1.4em;

  padding-left: 50px;

}

ul.second-menu > li:hover > a {

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(177,226,32,1)), color-stop(100%,rgba(116,141,46,1))); /* Chrome,Safari4+ */

  color: #252525;

  cursor: pointer;

}

    $('ul.menu-list > li').click(function(){

      $('ul.menu-list > li.active').removeClass('active');

      $(this).addClass('active');

      return false;

    });