编程 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技术：让你的名字动起来

Apr 27 HTML / CSS

CSS3——齿轮转动关键代码

May 02 HTML / CSS

css3实现的多级渐变下拉菜单导航效果代码

Aug 31 HTML / CSS

css3 border旋转时的动画应用

Jan 22 HTML / CSS

突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述

Jan 31 HTML / CSS

HTML5 video 视频标签使用介绍

Feb 03 HTML / CSS

HTML5制作酷炫音频播放器插件图文教程

Dec 30 HTML / CSS

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

Mar 17 HTML / CSS

HTML5拖拽的简单实例

May 30 HTML / CSS

HTML5进阶段内联标签汇总（小篇）

Jul 13 HTML / CSS

通过canvas转换颜色为RGBA格式及性能问题的解决

Nov 22 HTML / CSS

POST提交数据常见的四种方式

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

一台收音机，让一家人都笑逐颜开！

2020/08/21 无线电

PHPCMS的使用小结

2010/09/20 PHP

ueditor 1.2.6 使用方法说明

2013/07/24 PHP

php使用imagick模块实现图片缩放、裁剪、压缩示例

2014/04/17 PHP

PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】

2017/04/27 PHP

PHP SFTP实现上传下载功能

2017/07/26 PHP

PHP异步进程助手async-helper

2018/02/05 PHP

Laravel5.4框架使用socialite实现github登录的方法

2019/03/20 PHP

懒就要懒到底——鼠标自动点击（含时间判断）

2007/02/20 Javascript

帮助避免错误的Javascript陷阱清单

2009/05/31 Javascript

jQuery防止click双击多次提交及传递动态函数或多参数

2014/04/02 Javascript

jQuery插件实现文件上传功能（支持拖拽）

2020/08/27 Javascript

Nodejs中的JWT和Session的使用

2018/08/21 NodeJs

Node.js EventEmmitter事件监听器用法实例分析

2019/01/07 Javascript

微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)

2019/01/23 Javascript

如何在项目中使用log4.js的方法步骤

2019/07/16 Javascript

Vue路由模块化配置的完整步骤

2019/08/14 Javascript

小程序api实现promise封装过程解析

2019/11/21 Javascript

vue render函数动态加载img的src路径操作

2020/10/26 Javascript

[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场

2018/04/05 DOTA

[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场

2018/04/11 DOTA

python实现机器人行走效果

2018/01/29 Python

3个用于数据科学的顶级Python库

2018/09/29 Python

Django 路由控制的实现代码

2018/11/08 Python

Python进阶:生成器懒人版本的迭代器详解

2019/06/29 Python

Python Numpy库datetime类型的处理详解

2019/07/13 Python

python将四元数变换为旋转矩阵的实例

2019/12/04 Python

使用python创建生成动态链接库dll的方法

2020/05/09 Python

Pycharm配置lua编译环境过程图解

2020/11/28 Python

德国低价购买灯具和家具网站：Style-home.de

2016/11/25 全球购物

团支书竞选演讲稿

2014/04/28 职场文书

党政领导班子民主生活会整改措施

2014/09/18 职场文书

开除员工通知

2015/04/22 职场文书

2016关于军训的心得体会

2016/01/11 职场文书

MySql 缓存查询原理与缓存监控和索引监控介绍

2021/07/02 MySQL

《帝国时代4》赛季预告新增内容编译器可创造地图

2022/04/03 其他游戏

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

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