编程 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教程(9):设置RGB颜色

Apr 02 HTML / CSS

css3 background属性调整增强介绍

Dec 18 HTML / CSS

一款利用html5和css3实现的3D滚动特效的教程

Jan 04 HTML / CSS

CSS3动画：5种预载动画效果实例

Apr 05 HTML / CSS

CSS3制作酷炫的条纹背景

Nov 09 HTML / CSS

css3 flex布局 justify-content:space-between 最后一行左对齐

Jan 02 HTML / CSS

HTML5 Notification（桌面提醒）功能使用实例

Mar 17 HTML / CSS

html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等

May 07 HTML / CSS

HTML5实现晶莹剔透的雨滴特效

May 14 HTML / CSS

使用HTML5里的classList操作CSS类

Jun 28 HTML / CSS

HTML5中判断横屏竖屏的方法(移动端)

Aug 04 HTML / CSS

canvas 橡皮筋式线条绘图应用方法

Feb 13 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 什么是PEAR？

2009/03/19 PHP

PHP常用正则表达式集锦

2014/08/17 PHP

smarty模板判断数组为空的方法

2015/06/10 PHP

简单介绍PHP的责任链编程模式

2015/08/11 PHP

PHP排序算法之归并排序(Merging Sort)实例详解

2018/04/21 PHP

extjs 列表框(multiselect)的动态添加列表项的方法

2009/07/31 Javascript

jQuery 数据缓存data(name, value)详解及实现

2010/01/04 Javascript

jquery 学习笔记一

2010/04/07 Javascript

一些老手都不一定知道的JavaScript技巧

2014/05/06 Javascript

js中string转int把String类型转化成int类型

2014/08/13 Javascript

每天一篇javascript学习小结（Function对象）

2015/11/16 Javascript

js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析

2016/12/27 Javascript

详解打造 Vue.js 可复用组件

2017/03/24 Javascript

微信小程序数字滚动插件使用详解

2018/02/02 Javascript

vue-cli 3.x配置跨域代理的实现方法

2019/04/12 Javascript

[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾

2016/06/29 DOTA

[00:10]DOTA2全国高校联赛速递

2018/05/30 DOTA

[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19

2018/08/21 DOTA

Python yield使用方法示例

2013/12/04 Python

对python中Librosa的mfcc步骤详解

2019/01/09 Python

Django 中自定义 Admin 样式与功能的实现方法

2019/07/04 Python

Python 绘制酷炫的三维图步骤详解

2019/07/12 Python

Python hashlib模块加密过程解析

2019/11/05 Python

python的等深分箱实例

2019/11/22 Python

python实现随机加减法生成器

2020/02/24 Python

Numpy中np.max的用法及np.maximum区别

2020/11/27 Python

伦敦最有品味的百货：Liberty London

2016/11/12 全球购物

意大利奢侈品购物网站：Giglio

2018/01/05 全球购物

static全局变量与普通的全局变量有什么区别

2014/05/27 面试题

大学生涯自我鉴定

2014/01/16 职场文书

驾驶员岗位职责

2014/01/29 职场文书

2014年自愿离婚协议书

2014/10/10 职场文书

2014财产信托协议书范本

2014/11/18 职场文书

航班延误投诉信

2015/07/02 职场文书

MySQL表的增删改查(基础)

2021/04/05 MySQL

基于Redis6.2.6版本部署Redis Cluster集群的问题

2022/04/01 Redis

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

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