只用CSS做的下拉式菜单--A Drop-Down Menu With Only CSS

时间：2022-07-02 12:47:08 编辑：袖梨来源：一聚教程网

最近在网上发现了一个只用CSS实现的下拉式菜单(Drop-Down Menu)，感觉很新鲜也很酷。于是仔细看了作者的介绍以及源代码，发现核心就是一个":hover"伪类的使用。在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。但IE6及其以下版本都不能很好的支持CSS2，因此 IE6及其以下版本就不能很好的运行这个程序了。所幸Firefox,Netscape,Opera,Safari等浏览器的最新版本均能很好的运行该程序(其他版本我没试过)。
我在网上找了一下解决该BUG的方法，最终找到一个不是很理想的方法，使用插件---IE7。这个插件能弥补很多IE6在CSS，透明PNG图像显示等方面的缺陷。使用也很简单，下载（44KB）解压后参见里面的README就能搞定。
下面说说我做的一个示例吧，你可以先看一下最终效果。
下面说几个关键的地方：
1、这段代码是为了使该菜单能在IE6及其以下版本的IE浏览器中都能正常工作而写的。导入了IE7这个插件中的ie7-standard-p.js这个文件。如果你能确保所有看到你的这个菜单的人都使用IE7或者Firefox,Opera,Netscape等浏览器的最新版本的话，那么大可以去掉该行代码。

2、该行代码是定义子菜单默认状态为隐藏。

#menu ul .item {...}{display:none;}

3、这行是关键代码。它的意思是当ul为hover状态时，显示子菜单。

#menu ul:hover .item{...}{display:block;}

4、这几行代码创建了一个菜单（菜单一），它有三个子菜单。

推荐专题

最新下载

热门教程

只用CSS做的下拉式菜单--A Drop-Down Menu With Only CSS

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程