Html 缩小我的信息框

我有一个由HTML和CSS组成的信息框。我似乎不知道如何缩小盒子和悬停内容的大小。每当我缩小盒子的尺寸时，悬停的内容就放不下了，我看不出我遗漏了什么。有人能告诉我如何正确地改变箱子的大小吗？任何有帮助的，干杯

.infobox列表{
显示：内联块；
文本对齐：居中；
}
ul，ol，li{
保证金：0；
填充：0；
列表样式位置：外部；
列表样式类型：无；
}
h1、h2、h3、h4、h5、h6、ul、li、ol、表单、字段集{
保证金：0；
填充：0；
}
*，*：之前，*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
菜单，目录{
显示：块；
列表样式类型：disc；
-之前的webkit保证金：1em；
-webkit后的页边距：1em；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
-webkit填充开始：40px；
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
填充：0；
保证金：0；
背景色：#fff；
颜色：#555；
最小宽度：20em；
}
.信息框李{
宽度：245px；
高度：245px；
背景：3299CC；
边框：1px实心#EFEF；
边界半径：4px；
利润率：0 20px 40px；
位置：相对位置；
溢出：隐藏；
}
.图片
{
宽度：135px；
高度：135px；
}
.一切
{
文本对齐：居中；
}
.infobox列表li{
显示：内联块；
垂直对齐：中间对齐；
}
a{
颜色：白色；
文字装饰：无；
字体重量：较轻；
}
.信息箱李.信息箱{
显示：表格单元格；
垂直对齐：中间对齐；
高度：245px；
宽度：245px；
}
.信息框李.阴影{
位置：绝对位置；
宽度：245px；
高度：245px；
左：0；
顶部：0px；
背景色：#a9bd38；
颜色：#fff；
显示：表格；
垂直对齐：中间对齐；
填充：20px 10px 0；
转换：translateY（-240px）；
-webkit转换：translateY（-240px）；
-moz变换：translateY（-240px）；
-ms变换：translateY（-240px）；
动画名称：windowshade out；
-webkit动画名称：windowshade out；
-moz动画名称：windowshade out；
-ms动画名称：windowshade out；
}
.信息框李：悬停.阴影{
动画名称：windowshade；
-webkit动画名称：windowshade；
-moz动画名称：windowshade；
-ms动画名称：windowshade；
}
.信息框li.阴影，
.信息框李：悬停.阴影{
动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
-webkit动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
-moz动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
-ms动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
动画持续时间：1.5s；
-webkit动画持续时间：0.5s；
-moz动画持续时间：0.5s；
-ms动画持续时间：0.5s；
动画迭代次数：1；
-webkit动画迭代计数：1；
-moz动画迭代次数：1；
-ms动画迭代次数：1次；
动画填充模式：正向；
-webkit动画填充模式：正向；
-moz动画填充模式：正向；
-ms动画填充模式：正向；
}
.信息框li.阴影h3{
颜色：#fff；
填充：10px；
字体大小：粗体；
}
第p节{
线高：1.3em；
颜色：#6d6e71；
宽度：95%；
填充：0 10px；
边缘顶部：5px；
左边距：8px；
}
p{
显示：块；
-之前的webkit保证金：1em；
-webkit后的页边距：1em；
-webkit保证金开始：0px；
-webkit页边距结束：0px；
}
img{
最大宽度：100%；
}
.infobox img{页边距底部：7px}
.信息框李.阴影{
位置：绝对位置；
宽度：245px；
高度：245px；
左：0；
排名：0；
背景色：#4682B4；
颜色：#fff；
显示：表格；
垂直对齐：中间对齐；
填充：20px 10px 0；
-webkit转换：translateY（-240px）；
-moz变换：translateY（-240px）；
-ms变换：translateY（-240px）；
转换：translateY（-240px）；
动画名称：windowshade out
-webkit动画名称：windowshade out；
-moz动画名称：windowshade out；
-ms动画名称：windowshade out；
}
.info框li.shade h3{颜色：#fff；填充：10px；字体重量：粗体}
.info框li.shade p{color:#fff；线条高度：1.4em；字体重量：normal}
.信息框李：悬停.阴影{
-webkit动画名称：windowshade；
-moz动画名称：windowshade；
-ms动画名称：windowshade；
动画名称：windowshade}
.ie9.信息框li:hover.shade{top:245px}
.info框li:将鼠标悬停在{文本装饰：无}
@-webkit关键帧windowshade{
0%{
-webkit转换：translateY（-240px）；
-moz变换：translateY（-240px）；
-ms变换：translateY（-240px）；
transform:translateY（-240px）}
100%{
-webkit转换：translateY（0）；
-moz变换：translateY（0）；
-ms变换：translateY（0）；
转换：translateY（0）}
}
@-moz关键帧windowshade{
0%{
-webkit转换：translateY（-240px）；
-moz变换：translateY（-240px）；
-ms变换：translateY（-240px）；
transform:translateY（-240px）}
100%{
-webkit转换：translateY（0）；
-moz变换：translateY（0）；
-ms变换：translateY（0）；
转换：translateY（0）}
}
@-ms关键帧windowshade{
0%{
-webkit转换：translateY（-240px）；
-moz变换：translateY（-240px）；
-ms变换：translateY（-240px）；
transform:translateY（-240px）}
100%{
-webkit转换：translateY（0）；
-moz变换：translateY（0）；
-ms变换：translateY（0）；
转换：translateY（0）}
}
@关键帧windowshade{
0%{
-webkit转换：translateY（-240px）；
-moz变换：translateY（-240px）；
-ms变换：translateY（-240px）；
transform:translateY（-240px）}
100%{
-webkit转换：translateY（0）；
-moz变换：translateY（0）；
-ms变换：translateY（0）；
转换：translateY（0）}
}
@-webkit关键帧windowshade out{
0%{
-webkit转换：translate
.info-boxes li {
// your other stuff
transform: scale(.9);           
}