求教:为什么给.topmenu .lihover b设置字体大小样式没用呢？
逃离星球
2016-04-12 09:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示大类下面的小类和图片悬浮</title>
<style type="text/css">
body{
/*margin: 0;*/
padding: 0;
behavior: url(css/csshover.htc);
}
.topmenu{
border:2px solid #e4393c;
width: 220px;
margin:0;
padding: 0;
}
.toptitle{
background-color: #e4393c;
height: 40px;
line-height: 40px;
font-size: 12px;
font-weight: bold;
color: white;
/*text-align: center;*/
padding-left: 20px;
}
.topmenu li{
list-style: none;
height: 30px;
line-height: 30px;
font-size: 11px;
padding-left: 12px;
z-index: 3;
background-image: url(0.jpg);
background-repeat: no-repeat;
background-position: right;
}
.topmenu li a{
text-decoration: none;
color: #313131;
}
.topmenu li a:hover{
text-decoration: underline;
font-weight: bold;
color: #e4393c;
}
.topmenu .lihover{/*鼠标移动到上面时，应用的样式*/
border: 1px solid #ddd;
border-right: 0;
box-shadow: 0 0 8px #ddd;
-moz-box-shadow: 0 0 8px #ddd;
-webkit-box-shadow: 0 0 8px #ddd;
background-image: none;
height: 60px;
border-left: 4px solid #e4393c;
}
.submenu{
display: none;
width: 715px;
left: 220px;
top: 40px;
position: absolute;
border: 1px solid #ddd;
z-index: 4;
box-shadow: 0 0 8px #ddd;
-moz-box-shadow: 0 0 8px #ddd;
background-color: white;
}
.leftdiv{
float: left;
width: 490px;
margin: 5px;
}
.rightdiv{
float: left;
width: 200px;
margin: 5px;
}
.topmenu .lihover .submenu{/*悬浮层*/
display: block;
}
.topmenu .lihover span{/*白色矩形框*/
background-color: white;
z-index: 20;
width: 20px;
height: 60px;
float: right;
position: relative;
}
.leftdiv dl{
display: block;
border-bottom: 1px solid #eee;
padding-bottom: 6px;
overflow: hidden;
}
.leftdiv dl dt{
/*display: block;*/
float: left;
width: 60px;
text-align: right;
height:22px;
line-height: 22px;
padding-right: 8px;
}
.leftdiv dl dt a{
color: #e4393c;
font-weight: bold;
text-decoration: underline;
font-size: 10px;
}
.leftdiv dl dd{
overflow: hidden;
}
.leftdiv dl dd a{
display: block;
float: left;
border-left: 1px solid #ccc;
color: #737373;
font-size: 9px;
padding: 0 8px;
height: 14px;
line-height: 14px;
margin: 4px 0;
}
.rightdiv dl dd{
margin: 3px 0;
}
.rightdiv dl dt{
color: #e4393c;
font-size: 10px;
font-weight: bold;
}
.rightdiv dl dd a{
font-size: 9px;
color: #737373;
line-height: 22px;
}
.rightdiv dl dd a:hover{
color: #737373;
font-weight: normal;
}
.topmenu li b{
display:none;
}
.topmenu .lihover b{
display: block;
height: 20px;
line-height: 20px;
font-weight: normal;
font-size: 6px;/*这条语句为什么没效果啊。。。*/
}
.rightPic{
position: relative;
bottom: -20px;
right: -35px;
}
</style>
</head>
2回答
-
- DMSF
- 2016-05-11 21:05:18
有些浏览器,比如谷歌,可以支持的最小字体是12px,你设置小于12px的字体时,是没有效果的.你设置大于12px的字体试试.
-
- Python程序猿
- 2016-04-13 13:06:16
topmenu与后边的点之间应该有一个空格
商城分类导航效果
63734 学习 · 312 问题
相似问题