Home  >  Article  >  Web Front-end  >  css写菜单:简洁注释版_经验交流

css写菜单:简洁注释版_经验交流

WBOY
WBOYOriginal
2016-05-16 12:10:031339browse

这里是简洁版,主要把 [ 显示/隐藏 ] 效果给剥离出来给大家研究。
主要是利用了a:hover[ie],li:hover[非ie]的状态来做出显示/隐藏菜单的效果。
关键之处:
 程序代码

这一段注释表示:只有非IE浏览器和IE7才能读取到 
这样在非IE浏览器及IE7版本的浏览器中读取到的html是:
 程序代码

  • 导航
         
    • 二级导航


  •  程序代码

    这一段注释代表:只有IE6以及IE6以下版本的浏览器才能读取到 
    而在IE6以及IE6以下版本的浏览器中读取到的html就是:
     程序代码
  • 导航
         
    • 二级导航

         


  • 有些朋友可能要问:为什么要搞的那么复杂,而不都用链接来包含二级列表呢,那样就只用写a:hover就可以了,代码简单多了。
    我个人觉得:
    玩标准就要尽可能的去遵循语义。
    在IE6以及以下版本中由于不支持a以外标记的hover伪类,所以目前来说只有这个办法能达到类似的目的,对着IE6...只好放弃语义了。
    但我们可不要为了一个IE6而坏了整锅汤哦,所以有些事情虽然麻烦了点,但还是要做的~
    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn