Horizontal Menu with Triangle

horiz_menu.css

*{
font-family: Helvetica;
font-size: 16px;
}

ul{
	list-style: none;
}

li{
float: left;
margin: 0px;
}
.active, .inactive{
display:inline-block;
float: left;
height: 30px;
padding: 5px 0px 5px 5px;
line-height: 30px;
}
.active:first-child{
padding-left: 180px
}
.active{
background-color: #D00;
color: #FFF;
}
.inactive{
background-color: #D8D8D8;
}
.active_icon{
display: inline-block;
width: 0px;
height: 0px;
background-color: #d8d8d8;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 
20px solid #D00;
}

horiz_menu.html

<div class="unordered">
	<ul>
		<li><div class="active">Populated List #1</div><span class="active_icon"></span></li>
		<li><div class="inactive">Populated List #1</div><span class="inactive_icon"></span></li>
		<li><div class="inactive">Populated List #1</div><span class="inactive_icon"></span></li> 
		<li><div class="inactive">Populated List #1</div><span class="inactive_icon"></span></li>
	</ul>
</div>