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

Web前端绘制0.5像素的几种方法

Aug 11 HTML / CSS

CSS3属性选择符介绍

Oct 17 HTML / CSS

css3实现超立体3D图片侧翻倾斜效果

Apr 16 HTML / CSS

css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单

Sep 02 HTML / CSS

CSS3属性box-shadow使用指南

Dec 09 HTML / CSS

轻松掌握CSS3中的字体大小单位rem的使用方法

May 24 HTML / CSS

css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

Dec 06 HTML / CSS

HTML5+CSS3实例：canvas 模拟实现电子彩票刮刮乐代码

Dec 30 HTML / CSS

CSS3 input框的实现代码类似Google登录的动画效果

Aug 04 HTML / CSS

HTML5是否真的可以取代Flash

Feb 10 HTML / CSS

html5弹跳球示例代码

Jul 23 HTML / CSS

canvas如何绘制钟表的方法

Dec 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 数组实例说明

2008/08/18 PHP

PHP Session_Regenerate_ID函数双释放内存破坏漏洞

2011/01/27 PHP

PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)

2012/04/02 PHP

通过PHP的内置函数，通过DES算法对数据加密和解密

2012/06/21 PHP

php中的注释、变量、数组、常量、函数应用介绍

2012/11/16 PHP

JSON扫盲帖 JSON.as类教程

2009/02/16 Javascript

初窥JQuery(二) 事件机制(1)

2010/11/25 Javascript

jquery中通过过滤器获取表单元素的实现代码

2011/07/05 Javascript

JavaScript异步调用定时方法并停止该方法实现代码

2012/03/16 Javascript

javascript 构造函数强制调用经验总结

2012/12/02 Javascript

php与js的区别是什么

2013/08/05 Javascript

jQuery插件分享之分页插件jqPagination

2014/06/06 Javascript

jQuery实现隔行背景色变色

2014/11/24 Javascript

JavaScript实现在页面间传值的方法

2015/04/07 Javascript

jQuery EasyUI实现右键菜单变灰不可用效果

2015/09/24 Javascript

javascript断点调试心得分享

2016/04/23 Javascript

js和jq使用submit方法无法提交表单的快速解决方法

2016/05/17 Javascript

基于jQuery封装的分页组件

2017/06/26 jQuery

Angularjs单选框相关的示例代码

2017/08/17 Javascript

Vue中v-show添加表达式的问题(判断是否显示)

2018/03/26 Javascript

[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片

2016/03/04 DOTA

python自动化测试之连接几组测试包实例

2014/09/28 Python

深入理解Python中的*重复运算符

2017/10/28 Python

深入理解Python中的super()方法

2017/11/20 Python

python如何通过twisted实现数据库异步插入

2018/03/20 Python

tensorflow: 查看 tensor详细数值方法

2018/06/13 Python

Python for循环生成列表的实例

2018/06/15 Python

python 定时器每天就执行一次的实现代码

2019/08/14 Python

应聘教师求职信

2014/07/19 职场文书

党的群众路线教育实践活动学习计划

2014/11/03 职场文书

2015年学校关工委工作总结

2015/04/03 职场文书

暂住证证明

2015/06/19 职场文书

推普标语口号大全

2015/12/26 职场文书

python3使用diagrams绘制架构图的步骤

2021/04/08 Python

解析Redis Cluster原理

2021/06/21 Redis

vue项目如何打包之项目打包优化（让打包的js文件变小）

2022/04/30 Vue.js

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

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