html如下
<div id="div">999</div>
<div id="dv" style="display: none;">
<ul id="uu" >
<li>
<ul id="uuu">
<li>1</li>
<li>2</li>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>
<ul id="uuu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
<ul id="uuu">
<li>1</li>
<li>2</li>
<li>5</li>
<li>6</li>
</ul id="uuu">
</li>
<li>
<ul id="uuu">
<li>1</li>
<li>2</li>
<li>7</li>
<li>8</li>
</ul>
</li>
<li>
<ul id="uuu">
<li>1</li>
<li>2</li>
<li>9</li>
<li>10</li>
</ul>
</li>
<li>
<ul id="uuu">
<li>1</li>
<li>2</li>
<li>11</li>
<li>12</li>
</ul>
</li>
</ul>
</div>
css代码
body{
margin: 0;
padding: 0;
}
div{
position: relative;
}
#uu{
width: 932px;
border: 1px solid #666;
margin: 200px auto;
background-color: rgb(193,193,193,.5);
border-radius: 30px;
}
#uu:before {
content: "";
display: block;
width: 0;
height: 0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #666;
position: absolute;
top: -50px;
left: 707px;
}
div:after{
content: "桥牌信息";
display:block;
width: 200px;
height: 50px;
border: 1px solid #ccc;
background-color: #666;
border-radius: 10px;
line-height: 50px;
text-align: center;
position:absolute;
top: -111px;
left: 645px;
}
#uu>li{
height: 51px;
list-style: none;
}
#uuu{
background-color:#fff;
}
#uuu>li{
background-color:#fff;
width: 200px;
height: 50px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 50px;
float: left;
list-style: none;
}
#uuu>li:nth-of-type(1),
#uuu>li:nth-of-type(3){
color: red;
font-size: 20px;
}
#div{
line-height: 50px;
text-align: center;
width: 100px;
height: 50px;
margin: 10px auto;
border: 1px solid #666;
}
js代码如下
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<script>
$("#div").hover(function(){
$("#dv").show()
},function(){
$("#dv").hide()
})
</script>
想动态生成表格的数据在条用ajax请求即可