编程 HTML / CSS

CSS3 网页下拉菜单代码解释中文翻译

Posted in HTML / CSS onFebruary 27, 2010

当我在为 WordPress 编写 Notepad 主题时，顺道学习了一些新的 CSS3 特性，现在此分享。查看演示可以看到一款类似 Mac 风格的多级下拉菜单，使用 border-radius，box-shadow 和 text-shadow 创建。在 Firefox，Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容 CSS3 的浏览器，也可以正常呈现页面，只不过忽略了对圆角和阴影的渲染。

查看演示：http://www.webdesignerwall.com/demo/css3-dropdown-menu

预览

下图展示了不兼容 CSS3 情况下的菜单样式。
CSS3 网页下拉菜单代码解释中文翻译
使用了一个渐变图像

白色透明的图像用于实现渐变效果。因为新的 CSS3 渐变特性还没有得到所有浏览器的支持，使用简便背景图片更为安全。

CSS3 网页下拉菜单代码解释中文翻译
渐变的强度可以通过切换背景图像的上移或下移来改变。此外，渐变颜色可以很容易地通过改变背景颜色来调整。

CSS3 网页下拉菜单代码解释中文翻译

CSS 代码

我不打算解释逐行解释 CSS 代码。下面的图片很好地解释了编写下拉菜单的关键点。

CSS3 网页下拉菜单代码解释中文翻译

英文原稿：CSS3 Dropdown Menu | WebDesignerWall

CSS3 网页下拉菜单代码解释中文翻译

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

css3学习之2D转换功能详解

Dec 23 HTML / CSS

CSS3实现全景图特效示例代码

Mar 26 HTML / CSS

CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码

Feb 24 HTML / CSS

浅谈cookie和localStorage那些事

Aug 27 HTML / CSS

X/HTML5 和 XHTML2

Oct 17 HTML / CSS

html5的新玩法——语音搜索

Jan 03 HTML / CSS

HTML5 Canvas draw方法制作动画效果示例

Jul 11 HTML / CSS

一波HTML5 Canvas基础绘图实例代码集合

Feb 28 HTML / CSS

HTML5 3D衣服摇摆动画特效

Mar 17 HTML / CSS

详解如何获取localStorage最大存储大小的方法

May 21 HTML / CSS

HTML5基于flash实现播放RTMP协议视频的示例代码

Dec 04 HTML / CSS

CSS Transition通过改变Height实现展开收起元素

Aug 07 HTML / CSS

CSS3模块的目前的状况分析

Feb 24 #HTML / CSS

让IE可以变相支持CSS3选择器

Jan 21 #HTML / CSS

玩转CSS3色彩

Jan 16 #HTML / CSS

需要知道的CSS3动画技术

Jan 01 #HTML / CSS

CSS3 倾斜的网页图片库实例教程

Nov 14 #HTML / CSS

不同浏览器对CSS3和HTML5的支持状况

Oct 31 #HTML / CSS

检测用户浏览器是否支持CSS3的方法

Aug 29 #HTML / CSS

You might like

PHP新手上路（十）

2006/10/09 PHP

Fatal error: Call to undefined function curl_init()解决方法

2010/04/09 PHP

url decode problem 解决方法

2011/12/26 PHP

PHP变量的定义、可变变量、变量引用、销毁方法

2013/12/20 PHP

PHP信号量基本用法实例详解

2016/02/12 PHP

PHP设计模式（五）适配器模式Adapter实例详解【结构型】

2020/05/02 PHP

jquery插件validation实现验证身份证号等

2015/06/04 Javascript

jQuery设置单选按钮radio选中/不可用的实例代码

2016/06/24 Javascript

将JSON字符串转换成Map对象的方法

2016/11/30 Javascript

关于页面刷新vuex数据消失问题解决方案

2017/07/03 Javascript

ionic 3.0+ 项目搭建运行环境的教程

2017/08/09 Javascript

webpack多页面开发实践

2017/12/18 Javascript

解决angularJS中input标签的ng-change事件无效问题

2018/09/13 Javascript

微信小程序+云开发实现欢迎登录注册

2019/05/24 Javascript

在微信小程序中渲染HTML内容3种解决方案及分析与问题解决

2020/01/12 Javascript

D3.js 实现带伸缩时间轴拓扑图的示例代码

2020/01/20 Javascript

测试、预发布后用python检测网页是否有日常链接

2014/06/03 Python

python通过urllib2获取带有中文参数url内容的方法

2015/03/13 Python

Python导出数据到Excel可读取的CSV文件的方法

2015/05/12 Python

python2.7实现FTP文件下载功能

2018/04/15 Python

详解python编译器和解释器的区别

2019/06/24 Python

python实现登录密码重置简易操作代码

2019/08/14 Python

解决Django删除migrations文件夹中的文件后出现的异常问题

2019/08/31 Python

详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据

2020/12/13 Python

pytorch中index_select()的用法详解

2021/01/06 Python

如何在Canvas中添加事件的方法示例

2019/05/21 HTML / CSS

C语言50道问题

2014/10/23 面试题

介绍一下结构化程序设计方法和面向对象程序设计方法的区别

2012/06/27 面试题

投资意向书

2014/07/30 职场文书

2014党员民主评议个人总结

2014/09/10 职场文书

房屋鉴定委托书范本

2014/09/23 职场文书

教师党的群众路线对照检查材料

2014/09/24 职场文书

法院干警四风问题个人对照检查材料思想汇报

2014/10/07 职场文书

机动车交通事故协议书

2015/01/29 职场文书

个人年终总结开头

2015/03/06 职场文书

python3实现无权最短路径的方法

2021/05/12 Python

CSS3 网页下拉菜单代码解释 中文翻译

CSS3 网页下拉菜单代码解释中文翻译