Simple HTML Tab effect

<style type= "Text/css" >
. box{width:200px;height:30px;background: #0000FF; color: #FFFFFF; margin:0 auto;line-height:30px;text-align:center;}
Body{text-align:center;}
#ul {display:inline-block;background: #CCCCCC; overflow:visible;position:relative; list-style:none; padding:0; margin:0;}
#ul >li{width:120px;height:40px;float:left;line-height:40px;text-align:40px;}
#ul >li>div{width:600px;height:300px;background: #D92D37;d isplay:none;font-size:20px;color: #FFFFFF; text-align:center;line-height:300px;}
#ul >li:hover>div{display:block;position:absolute;left:0px;top:40px;}
#ul >.one Div{display:block;}
#ul >.one:hover{background: #666666;}
#ul >.two:hover{background: #666666;}
#ul >.three:hover{background: #666666;}
#ul >.fore:hover{background: #666666;}
#ul >.five:hover{background: #666666;}
</style>
<ul id= "ul" >
<li class= "One" ><span>1</span><div> first </div></li>
<li class= "Two" ><span>2</span><div> second </div></li>
<li class= "Three" ><span>3</span><div> third </div></li>
<li class= "Fore" ><span>4</span><div> fourth </div></li>
<li class= "Five" ><span>5</span><div> fifth </div></li>
</ul>
<scritp></scritp>

Simple HTML Tab effect