当柳上原的风吹向天际的时候...

真正的快乐来源于创造

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks
通常,我们可以如下所示制作横向菜单:
#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 有背景还非得如此不可,这和网上流传甚广的方案不一样,看来知识不能拿来就用,还需要自己尝试一下。
posted on 2012-02-14 15:31 何杨 阅读(353) 评论(0)  编辑  收藏 所属分类: CSS

只有注册用户登录后才能发表评论。


网站导航: