通常,我們可以如下所示制作橫向菜單:
#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 有背景還非得如此不可,這和網上流傳甚廣的方案不一樣,看來知識不能拿來就用,還需要自己嘗試一下。