<style>
*{
margin:0;
padding:0;
}
#menu{
width:350px;
height:240px;
padding-left:0px;
background:#DDDDDD;
}
#container
{
padding-top:10px;
width:350px;
margin:0px;

}
#beautytab
{
width:350px;

padding-bottom:0px;
float:left;
clear:right;
position:relative;


}

#beautytab li
{
width:87px;
float:left;
margin:0;
padding:8px 0 0 16px;
border:0;
text-align:left;
text-decoration:none;
font-family:"宋体";
font-size:14px;
display:inline;
height:27px;
background:url(2.jpg);
}
#beautytab li a:hover,#beautytab li a:active,#beautytab li a:visited
{
text-decoration:none;

}
#content{
margin:0;
padding:0;
}
#tabcontent
{
margin:0px;
padding:0px 0px 0px 0px;
}
#tabcontent li
{
width:350px;
float:left;
position:absolute;
font-family:"宋体";
font-size:14px;
background-color:#FFCC00;
height:200px;


}


</style>
<div id=menu>
  <div id="container">
    <ul id="beautytab">
      <li id="l0"><a  href="#"   onmouseover="livisibility(0)"> 标签卡一 </a> </li>
      <li id="l1"><a  href="#"   onmouseover="livisibility(1)"> 标签卡二 </a> </li>
      <li id="l2"><a  href="#"   onmouseover="livisibility(2)"> 标签卡三 </a> </li>
      <li id="l3"><a  href="#"   onmouseover="livisibility(3)"> 标签卡四 </a> </li>
    </ul>
  </div>
  <div id="content">
    <ul id="tabcontent">
      <li  style="visibility:visible"> 内容1 </li>
      <li  style="visibility:hidden"> 内容2 </li>
      <li  style="visibility:hidden"> 内容3 </li>
      <li  style="visibility:hidden"> 内容4 </li>
    </ul>
  </div>
</div>
<script   language="javascript"> 
function   livisibility(iNode) 
{ 
var   li=document.all["tabcontent"].childNodes; 
for(i=0;i <li.length;i++) 
{ 
if(i==iNode) 
li(i).style.visibility="visible"; 
else 
li(i).style.visibility="hidden";
} 
} 
</script>