编程 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 线性渐变和径向渐变示例附图

Apr 08 HTML / CSS

CSS3对背景图片的裁剪及尺寸和位置的设定方法

Mar 07 HTML / CSS

CSS3中的Transition过度与Animation动画属性使用要点

May 20 HTML / CSS

HTML5 canvas基本绘图之绘制线段

Jun 27 HTML / CSS

使用HTML5的链接预取功能(link prefetching)给网站提速

Dec 13 HTML / CSS

html5指南-4.使用Geolocation实现定位功能

Jan 07 HTML / CSS

html5 viewport使用方法示例详解

Dec 02 HTML / CSS

HTML5 Canvas的常用线条属性值总结

Mar 17 HTML / CSS

HTML5不支持标签和新增标签详解

Jun 27 HTML / CSS

浅谈html5与APP混合开发遇到的问题总结

Mar 20 HTML / CSS

canvas绘图按照contain或者cover方式适配并居中显示

Feb 18 HTML / CSS

html粘性页脚的具体使用

Jan 18 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

phpQuery占用内存过多的处理方法

2013/11/13 PHP

php实现session自定义会话处理器的方法

2015/01/27 PHP

PHP计算指定日期所在周的开始和结束日期的方法

2015/03/24 PHP

使用ltrace工具跟踪PHP库函数调用的方法

2016/04/25 PHP

ExtJS 2.0实用简明教程之Border区域布局

2009/04/29 Javascript

JavaScript数据类型之基本类型和引用类型的值

2015/04/01 Javascript

javascript实现选中复选框后相关输入框变灰不可用的方法

2015/08/11 Javascript

Bootstrap每天必学之导航

2015/11/26 Javascript

简单介绍JavaScript数据类型之隐式类型转换

2015/12/28 Javascript

jQuery设置聚焦并使光标位置在文字最后的实现方法

2016/08/02 Javascript

微信小程序地图（map）实例详解

2016/11/16 Javascript

Bootstrap 响应式实用工具实例详解

2017/03/29 Javascript

详解如何使用vue-cli脚手架搭建Vue.js项目

2017/05/19 Javascript

Node.js五大应用性能技巧小结（必须收藏）

2017/08/09 Javascript

JS实现分页浏览横向图片(类轮播)实例代码

2017/11/06 Javascript

浅析JavaScript中的特殊数据类型

2017/12/15 Javascript

详解如何构建Promise队列实现异步函数顺序执行

2018/10/23 Javascript

详解使用React制作一个模态框

2019/03/14 Javascript

微信小程序如何实现全局重新加载

2019/06/05 Javascript

vue 数据操作相关总结

2020/12/17 Vue.js

Python sqlite3事务处理方法实例分析

2017/06/19 Python

python虚拟环境的安装配置图文教程

2017/10/20 Python

详谈Numpy中数组重塑、合并与拆分方法

2018/04/17 Python

不管你的Python报什么错，用这个模块就能正常运行

2018/09/14 Python

python实现对输入的密文加密

2019/03/20 Python

python脚本之一键移动自定格式文件方法实例

2019/09/02 Python

带你彻底搞懂python操作mysql数据库(cursor游标讲解)

2020/01/06 Python

video.js支持m3u8格式直播的实现示例

2020/05/20 HTML / CSS

英国豪华真皮和布艺沙发销售网站：Darlings of Chelsea

2018/01/05 全球购物

新学期校长寄语

2014/01/18 职场文书

酒店拾金不昧表扬信

2014/01/18 职场文书

2014最新房贷收入证明范本

2014/09/12 职场文书

初中家长意见

2015/06/03 职场文书

开学第一周值周总结

2015/07/16 职场文书

解析Java异步之call future

2021/06/14 Java/Android

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

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