$(document).ready(function() {
    /* for jQuery 1.7.2*/
    $(".supramenu .subtitle-li ul li a").hover(

    function() {
        $(this).animate({
            color: '#39c6e9'
        }, 200);
    }, function() {
        $(this).animate({
            color: '#646464'
        }, 300);
    })


    $(".subtitle").click(function() {
        $(this).parent().children("ul").slideToggle('fast');
        $(this).toggleClass("open-me").toggleClass("close-me");
    })


    $(".subtitle").hover(function() {
        if ($(this).hasClass("open-me")) $(this).animate({
            backgroundColor: '#31c1e5'
        }, 200).css('backgroundImage', 'url(http://archie-goodwin.net/img/arrow_right_wh12.png)');
        else $(this).animate({
            color: '#fff',
            backgroundColor: '#39c6e9'
        }, 200).css('backgroundImage', 'url(http://archie-goodwin.net/img/arrow_right_wh12.png)');
    }, function() {
        if ($(this).hasClass("open-me")) $(this).animate({
            backgroundColor: '#39c6e9'
        }, 200).css('backgroundImage', 'url(http://archie-goodwin.net/img/arrow_up12.png)');
        else $(this).animate({
            color: '#3d3d3d',
            backgroundColor: '#fff'
        }, 300).css('backgroundImage', 'url(http://archie-goodwin.net/img/arrow_right12.png)');
    })


    $(".subtitle-li ul li a").click(function() {
        $(this).parent().parent().children().removeClass("active-me");
        $(this).parent().addClass("active-me");
    })

});

Setting Validate Copy Format

.supramenu {
  color:#646464;
  font-family: 'Roboto';
  list-style:none;
  width:290px;
  box-shadow:
}
.open-me {
  color:#fff;
  background:#39c6e9 url(http://archie-goodwin.net/img/arrow_up12.png) right 20px top 50% no-repeat;
}
.supramenu li {
  list-style:none;
}
.supramenu .subtitle {
  display:block;
  padding:10px 20px;
  font-size:15px;
  font-weight: 500;
  cursor:pointer;
}
.supramenu .subtitle-li ul li {
  border-left: 2px solid #c4f1fc;
  margin-left:-20px;
  padding:10px 5px 10px 20px;
}
.supramenu .close ul {
  display:none;
}
.close-me {
  background: url(http://archie-goodwin.net/img/arrow_right12.png) right 20px center no-repeat;
  color:#3d3d3d;
}

.active-me {
  background:url(http://archie-goodwin.net/img/check.png) left center no-repeat;
  margin-left:-22px !important;
  padding:10px 5px 10px 24px !important;
  border:none !important;
}

.supramenu .subtitle-li ul li a {
  text-decoration:none;
  color:#646464;
}
.black {
  border:solid 1px black;
}
.red {
  border:solid 1px red;
}

Setting Validate Copy Format

<link href='http://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>

<ul class="supramenu">
  <li class="subtitle-li open"><span class="subtitle open-me">SubTitle 1</span>
    <ul>
      <li><a href="">Link 1</a></li>
      <li class="active-me"><a href=http://wptest.ru>Link 2</a></li>
      <li><a href=http://wptest.ru>Link 3</a></li>
      <li><a href=http://wptest.ru>Link 4</a></li>
      <li><a href=http://wptest.ru>Link 5</a></li>
    </ul>
  </li>
  <li class="subtitle-li close"><span class="subtitle close-me">SubTitle 2</span>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
    </ul>
  </li>
    <li class="subtitle-li close"><span class="subtitle close-me">SubTitle 3</span>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
    </ul>
  </li>
</ul>

Copy Format

Download