通常,我们可以如下所示制作横向菜单:
#commonUsedDocumentContainerDiv ul{
margin:0px;
padding:0px;
list-style-type:none;
vertical-align:middle ;
}
#commonUsedDocumentContainerDiv li a{
width:130px;
height:75px;
line-height:32px;
font-family:"宋体","Tahoma";
font-size:14px;
font-weight:bold;
color:#000000;
text-decoration:none;
text-align:left;
background:#ffffff;
}
#commonUsedDocumentContainerDiv li a:hover{
width:130px;
height:75px;
line-height:32px;
font-family:"宋体","Tahoma";
font-size:14px;
font-weight:bold;
color:#0000ff;
text-decoration:none;
text-align:left;
background:#ffffff;
}
这样做,在FF或是ie8以上的版本中,都没有问题,但是ie6有问题,具体上看来本来应该是一横排的菜单变成了阶梯状,一下子就难看了。
这是因为ie6对ul/li的解释方式所致,要解决这个问题也很简单,对li的样式也进行设置就行了,如下的粗体部分:
#commonUsedDocumentContainerDiv ul{
margin:0px;
padding:0px;
list-style-type:none;
vertical-align:middle ;
}
#commonUsedDocumentContainerDiv li{
float:left;
display:block;
width:130px;
height:75px;
background:#ffffff;
}
#commonUsedDocumentContainerDiv li a{
width:130px;
height:75px;
line-height:32px;
font-family:"宋体","Tahoma";
font-size:14px;
font-weight:bold;
color:#000000;
text-decoration:none;
text-align:left;
background:#ffffff;
}
#commonUsedDocumentContainerDiv li a:hover{
width:130px;
height:75px;
line-height:32px;
font-family:"宋体","Tahoma";
font-size:14px;
font-weight:bold;
color:#0000ff;
text-decoration:none;
text-align:left;
background:#ffffff;
}
另外需要注意的是,li a和li a:hover中照样可以设置display:block,如果li a 或者li a:hover 有背景还非得如此不可,这和网上流传甚广的方案不一样,看来知识不能拿来就用,还需要自己尝试一下。