总结:
1.兼容ie6-7hover
可以下载
behavior:url(css/csshover.htc); csshover.htc文件
Firefox: -moz-
Chrome、Safari: -webkit-
Opera: -o-
IE: -ms-
3.设置边框外发光效果:
box-shadow: h-shadow(水平阴影的位置,必需) v-shadow(垂直阴影的位置,必需) blur(模糊距离,可选) spread(阴影的尺寸,可选) color(阴影的颜色,可选) inset(将外部阴影(outset)改为内部阴影,可选);
box-shadow:0 0 8px #ddd;
-moz-box-shadow:0 0 8px #ddd; //firefox
-webkit-box-shadow:0 0 8px #ddd; //google
4.总要的去除浮动栏之间缝隙
.menu li:hover span{
background:#fff;
display:inline-block;
z-index:20px;width:20px;
height:30px;
float:right;
position:relative;
}
5. 巧用dl
.menu{
display:block;
width:220px;
border:2px solid #e4593c;
}
.titile{
height:40px;
line-height:40px;
text-align:left;
font-weight:600;
color:#fff;
text-indent:7px;
background:#e4593c;
}
.menu li{
height:30px;
line-height:30px;
text-indent:7px;
z-index:3;
background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);
background-repeat:no-repeat;
background-position:right center;
}
.menu li a:hover{
text-decoration:underline;
font-weight:bold;
color:#e4593c;
}
.menu li:hover{
border:1px solid #DDD;
border-right:0;
box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image:none;
}
.menu li a{
color:#313131;
cursor:pointer;}
.submenu{
display:none;
width:715px;
left:218px;
position:absolute;
top:40px;
border:1px solid #ddd;
z-index:4;
background:#fff;
box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
}
.left{
float:left;
width:490px;
margin:5px;
}
.rightdiv{
float:left;
width:200px;
margin:5px;
background:#465DE4;
}
.menu li:hover .submenu{
display:block;}
.menu li:hover span{
background:#fff;
display:inline-block;
z-index:20px;width:20px;
height:30px;
float:right;
position:relative;
}
.left dl{
display:block;
border-bottom:1px solid #eee;
padding-bottom:6px;
overflow:hidden;}
.left dl dt{
display:block;
float:left;
width:60px;
text-align:right;
line-height:22px;
line-height:22px;
padding-right:6px;
}
.left dl dt{
color:#e4593c;
font-size:12px;
font-weight:600;
}
.left dl dd{
display:block;
overflow:hidden;
}
.left dl dd a{
display:block;
float:left;
border-left:1px solid #eee;
color:#737373;
padding:0 9px;
line-height:22px;
height:22px;
}