CodePen

HTML

            
              <div class="span4">
							<ul id="resp-list">
								<li class="clearfix">

									<a href="#" class="active">
										Test
									</a>

								</li>
								<li>
									<a href="#">Test 2</a>
								</li>
								<li>
									<a href="#">Test 3</a>
								</li>
								<li>
									<a href="#">Test 4</a>
								</li>
								<li>
									<a href="#">Test 5</a>
								</li>
								<li>
									<a href="#">Test 6</a>
								</li>
								<li>
									<a href="#">Test 7</a>
								</li>
								<li>
									<a href="#">Test 8</a>
								</li>
								<li>
									<a href="#">Test 9</a>
								</li>
							</ul>
						</div>
            
          
!

CSS

            
              #resp-list{
	margin-top:10px;
    list-style:none;
}

#resp-list li{
	width: 328px;
	height: 48px;
}

#resp-list li a{
	color:#9e9e9e;
	font-size:18px;
	line-height: 48px;
	padding-left:20px;
	display: block;
	text-decoration:none;
	font-family: 'Avenir', 'Helvetica', Arial;
	width: 284px;
	float:left;
}

#resp-list li a:hover{
	color:#AD975A;
}

#resp-list li a.active{
	background-color:#ad975a;
	color:#fff;
}

#responsibilities #resp-post h2{
	font-family: 'Avenir', 'Helvetica', Arial;
	font-size:25px;
}

#responsibilities .arrow-right {
	width: 0; 
	height: 0; 
	border-top: 24px solid transparent;
	border-bottom: 24px solid transparent;
	border-left: 24px solid #AD975A;
	display:block;
	position: relative;
  float:right;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $("#resp-list a").click(function () {
  	 	 $("#resp-list a").removeClass("active");
  		 $(this).addClass("active"); 

	 	 if($(this).hasClass("active")){
	 	 	$("#resp-list a.active:parent").add('<span class="fr arrow-right"></span>');
	 	 }
	 });
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................