Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > css div ul li 导航栏(横向）：（纯CSS 多级菜单IE6能支持的）_html/css_WEB-ITnose

css div ul li 导航栏(横向）：（纯CSS 多级菜单IE6能支持的）_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:31:42
Original
1802 people have browsed it

这部分最后给出的成品效果比较惊人，也就是传说中的纯CSS六级菜单。这个东西最厉害的地方是兼容所有主流浏览器（IE6，IE8，Maxthon2.5，firefox3.5，opera10，safari4与chrome2），而一点CSS hack也没有用。毕竟CSS hack只是权宜之计，治标不治本，谁知它会对未来新版本的浏览器有什么副作用，因此能不用就不要用了。由于结构非常有规律，读者认真学习后，可以自行扩展为十级菜单。

纯CSS多级菜单

由于IE6能支持的伪类少得可怜，仅支持a元素的hover与visited与active。为了显示隐藏的二级菜单，我们必须把二级菜单的那个无序列表放到a元素下，但这样一来firefox那边又发难了。这时我们就要请出IE的条件注释，让页面在IE6下呈现一套结构层，在其他浏览器下呈现另一套。

01.

02.   

    03.     

  • 04.       菜单三

    05.       

    09.       

    10.     

    • 11.     

  • 12.       菜单二二

    13.       

    17.       

    18.     

    • 19.     

  • 20.       //************略***********

    21.     

    • 22.     

  • 23.       //************略***********

    24.     

    • 25.   

26.

纯CSS多级菜单by 司徒正美

纯CSS多级菜单 by 司徒正美

Related labels：
css div ul li 导航栏(横向）：（纯CSS 多级菜单IE6能支持的）
source：php.cn
Previous article：一些Div+CSS资料的站点_html/css_WEB-ITnose Next article：Advantages and problems of CSS+DIV website design_html/css_WEB-ITnose
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
2187
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
2334
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
1961
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
1846
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1899
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