Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > css写菜单：简洁注释版_经验交流

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

WBOY
Release： 2016-05-16 12:10:03
Original
1427 people have browsed it

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

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

  • 导航
         
    • 二级导航


    •  程序代码

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

         

    • 有些朋友可能要问：为什么要搞的那么复杂，而不都用链接来包含二级列表呢，那样就只用写a:hover就可以了，代码简单多了。
    我个人觉得：
    玩标准就要尽可能的去遵循语义。
    在IE6以及以下版本中由于不支持a以外标记的hover伪类，所以目前来说只有这个办法能达到类似的目的，对着IE6...只好放弃语义了。
    但我们可不要为了一个IE6而坏了整锅汤哦，所以有些事情虽然麻烦了点，但还是要做的~
    Related labels：
    css写菜单：简洁注释版
    source：php.cn
    Previous article：html在线编辑器的更新[2006-05]_CSS/HTML Next article：Another typical css example_Experience exchange
    Statement of this Website
    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
    Latest Articles by Author
    Latest Issues
    function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
    From 2024-04-29 11:01:01
    0
    3
    2245
    How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
    From 2024-04-23 00:22:19
    0
    11
    2385
    The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
    From 2024-04-19 15:37:47
    0
    1
    1994
    There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
    From 2024-04-18 23:52:34
    0
    1
    1881
    Where is the courseware about CSS mind mapping? Courseware
    From 2024-04-16 10:10:18
    0
    0
    1950
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template