编程 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 相关文章推荐

一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9

Nov 18 HTML / CSS

一款纯css3实现的动画加载导航

Oct 08 HTML / CSS

非常漂亮的CSS3百叶窗焦点图动画

Feb 24 HTML / CSS

HTML5的文档结构和新增标签完全解析

Apr 21 HTML / CSS

Canvas 文字碰撞检测并抽稀的方法

May 27 HTML / CSS

HTML 5 标签、属性、事件及浏览器兼容性速查表附打包下载

Oct 20 HTML / CSS

HTML5实现一个能够移动的小坦克示例代码

Sep 02 HTML / CSS

HTML5 video播放器全屏(fullScreen)方法实例

Apr 24 HTML / CSS

Html5让容器充满屏幕高度或自适应剩余高度的布局实现

May 14 HTML / CSS

html5小程序飞入购物车(抛物线绘制运动轨迹点)

Oct 19 HTML / CSS

前端水印的简单实现代码示例

Dec 02 HTML / CSS

html,css,javascript是怎样变成页面的

May 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的FTP学习(四)

2006/10/09 PHP

phpMyAdmin 链接表的附加功能尚未激活的问题

2010/08/01 PHP

JS中encodeURIComponent函数用php解码的代码

2012/03/01 PHP

php中jpgraph类库的使用介绍

2013/08/08 PHP

C/S和B/S两种架构区别与优缺点分析

2014/10/23 PHP

PHP Opcache安装和配置方法介绍

2015/05/28 PHP

[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法

2017/04/01 PHP

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

2010/03/05 Javascript

JavaScript创建一个欢迎cookie弹出窗实现代码

2013/03/15 Javascript

Array 重排序方法和操作方法的简单实例

2014/01/24 Javascript

jquery访问ashx文件示例代码

2014/08/11 Javascript

jQuery 浮动导航菜单适合购物商品类型的网站

2014/09/09 Javascript

jQuery中DOM树操作之使用反向插入方法实例分析

2015/01/23 Javascript

jquery实现列表上下移动功能

2016/02/25 Javascript

jQuery的内容过滤选择器学习教程

2016/04/18 Javascript

jQuery序列化表单成对象的简单实现

2016/11/29 Javascript

浅谈jQuery操作类数组的工具方法

2016/12/23 Javascript

深入浅析Vue全局组件与局部组件的区别

2018/06/15 Javascript

jquery 动态遍历select 赋值的实例

2018/09/12 jQuery

详解vuex状态管理模式

2018/11/01 Javascript

vue中的过滤器实例代码详解

2019/06/06 Javascript

JavaScript Event Loop相关原理解析

2020/06/10 Javascript

[02:44]DOTA2英雄基础教程钢背兽

2013/12/19 DOTA

python利用小波分析进行特征提取的实例

2019/01/09 Python

windows环境中利用celery实现简单任务队列过程解析

2019/11/29 Python

appium+python adb常用命令分享

2020/03/06 Python

Python学习之time模块的基本使用

2021/01/17 Python

CSS3实现简易版的刮刮乐效果

2016/09/27 HTML / CSS

CSS3教程(7):CSS3嵌入字体

2009/04/02 HTML / CSS

用html5的canvas画布绘制贝塞尔曲线完整代码

2013/08/14 HTML / CSS

html5+css3进度条倒计时动画特效代码【推荐】

2016/03/08 HTML / CSS

Chemist Warehouse官方海外旗舰店：澳洲第一连锁大药房

2017/08/25 全球购物

美国女孩洋娃娃店：American Girl

2017/10/24 全球购物

Andrew Marc官网：设计师外套的领先制造商

2019/10/30 全球购物

团结主题班会

2015/08/13 职场文书

如何判断pytorch是否支持GPU加速

2021/06/01 Python

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

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