Can anyone help with this css issue please. All is fine but when you click a tab it doesnt become active as the default home tab. Iam sure its a real quick fix but im stumped!

<html>
<head>
<style>

.tabrow {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
line-height: 24px;
}
.tabrow li {
margin: 0 1px;
padding: 0 10px;
border: 1px solid #AAA;
background: #ECECEC;
display: inline-block;
}

.tabrow li.selected {
background: #FFF;
color: #000;
}

.tabrow {
position: relative;
}
.tabrow:after {
position: absolute;
content: "";
width: 100%;
bottom: 0;
left: 0;
border-bottom: 1px solid #AAA;
z-index: 1;
}

.tabrow:before {
z-index: 1;
}
.tabrow li {
position: relative;
z-index: 0;
}
.tabrow li.selected {
z-index: 2;
border-bottom-color: #FFF;
}

</style>
</head>

<body>

<ul class="tabrow">
<li class="selected">Home</li>
<li>Test3</li>
<li>Test1</li>
<li>Test2</li>
</ul>

</body>

</html>