不用script仅用css编写无限级弹出菜单

来源：天极网时间：2008-04-24 14:03:00　

一直以来，我们大多使用js来实现弹出菜单，可是根据 w3c 的css标准，根本就没有这个必要。只需要简单得使用css+html就可以做出一个无限分级的弹出菜单。

没错，就是利用 Element:hover 这个伪类。

注意，浏览这个例子，你必须使用标准浏览器，例如 Mozilla Firefox/ Opera 7.5

IE 不行!!

效果截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>css menu - asp之家</title> <style type="text/css"> /*<![CDATA[*/ ul.menu { width:180px; cursor:hand; list-style-type:none; border:1px solid #cccccc; padding:0px; margin:0px; } ul.menu li { width:100％; display:block; position:relative; } ul.menu li a { background-color:#06829C; color:#ffffff; width:100％; display:block; font-size:9pt; padding:2px; padding-left:10px; } ul.menu li ul.menu { display:none; width:190px; position:absolute; z-index:1000; left:80％; top:-10px; } ul.menu li:hover > a { width:100％; background-color:#64ACF8; color:#ffffff; } ul.menu li:hover > ul.menu { display:block; } /*]]>*/ </style></head> <body> <ul class="menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Menu Item ></a> <ul class="menu"> <li><a href="#">item</a></li> <li> <a href="#">item ></a> <ul class="menu"> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li> <a href="#">item ></a> <ul class="menu"> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li> <a href="#">item ></a> <ul class="menu"> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> </ul> </li> </ul></body></html>

标签：无限级,菜单,css

投稿

不用script仅用css编写无限级弹出菜单

猜你喜欢

Django完整增删改查系统实例代码

python 多线程共享全局变量的优劣

python 实现dcmtk关联pacs功能推送下拉影像(推荐)

一文速学Python+Pyecharts绘制树形图

php获取当前时间的毫秒数的方法

判断 iframe 是否加载完成的完美方法

python 基于Apscheduler实现定时任务

Python如何快速上手? 快速掌握一门新语言的方法

详解MySQL分组链接的使用技巧

在Python的Tornado框架中实现简单的在线代理的教程

python之pyqt5通过按钮改变Label的背景颜色方法

SQL常用数据库操作命令使用方法

python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作

如何使用python中的networkx来生成一个图

Python实现读取txt文件中的数据并绘制出图形操作示例

使用Python串口实时显示数据并绘图的例子

深入理解python try异常处理机制

python 字符串和整数的转换方法

Python按行读取文件的简单实现方法

new_zeros() pytorch版本的转换方式