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

CSS Grid布局教程之什么是网格布局

Dec 30 HTML / CSS

css3遮罩层镂空效果的多种实现方法

May 11 HTML / CSS

Html5之svg可缩放矢量图形_动力节点Java学院整理

Jul 17 HTML / CSS

canvas基础之图形验证码的示例

Jan 02 HTML / CSS

HTML5 离线应用之打造零请求、无流量网站的解决方法

Apr 25 HTML / CSS

html5 利用canvas实现超级玛丽简单动画

Sep 06 HTML / CSS

HTML5 video 视频标签使用介绍

Feb 03 HTML / CSS

html5 视频播放解决方案

Nov 06 HTML / CSS

SVG实现多彩圆环倒计时效果的示例代码

Nov 21 HTML / CSS

canvas学习和滤镜实现代码

Aug 22 HTML / CSS

前后端结合实现amazeUI分页效果

Aug 21 HTML / CSS

解决flex布局中子项目尺寸不受flex-shrink限制

May 11 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笔试题

2009/08/04 PHP

新手学习PHP的一些基础知识分享

2011/07/27 PHP

很让人受教的提高php代码质量36计

2012/09/05 PHP

推荐几个开源的微信开发项目

2014/12/28 PHP

php提交表单发送邮件的方法

2015/03/20 PHP

php上传功能集后缀名判断和随机命名(强力推荐)

2015/09/10 PHP

简单谈谈PHP中的trait

2017/02/25 PHP

JavaScript Eval 函数使用

2010/03/23 Javascript

js中parseFloat(参数1,参数2)定义和用法及注意事项

2013/01/27 Javascript

jQuery中 noConflict() 方法使用

2013/04/25 Javascript

jquery 快速回到页首的方法

2013/12/05 Javascript

javascript定义变量时加var与不加var的区别

2014/12/22 Javascript

Javascript中replace()小结

2015/09/30 Javascript

JavaScript通过代码调用Flash显示的方法

2016/02/02 Javascript

基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)

2016/02/18 Javascript

Ext JS框架中日期函数的用法及日期选择控件的实现

2016/05/21 Javascript

Javascript实现图片不间断滚动的代码

2016/06/22 Javascript

javascript动画系列之模拟滚动条

2016/12/13 Javascript

详解node.js平台下Express的session与cookie模块包的配置

2017/04/26 Javascript

简单谈谈关于Angular Cli打包的事

2017/09/05 Javascript

JavaScript数组push方法使用注意事项

2017/10/30 Javascript

jQuery niceScroll滚动条错位问题的解决方法

2018/02/03 jQuery

解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

2018/11/08 Javascript

微信小程序Echarts图表组件使用方法详解

2019/06/25 Javascript

python中matplotlib的颜色及线条控制的示例

2018/03/16 Python

Python函数装饰器实现方法详解

2018/12/22 Python

PyCharm更改字体和界面样式的方法步骤

2019/09/27 Python

Python hashlib模块加密过程解析

2019/11/05 Python

CSS3+HTML5+JS 实现一个块的收缩与展开动画效果

2020/11/17 HTML / CSS

俄罗斯EPL钻石珠宝店：ЭПЛ

2019/10/22 全球购物

Yahoo-PHP面试题3

2012/01/14 面试题

预备党员入党思想汇报

2014/01/04 职场文书

药学职务聘任书

2014/03/29 职场文书

机械操作工岗位职责

2014/08/08 职场文书

营销与策划实训报告

2014/11/05 职场文书

关于PHP数组迭代器的使用方法实例

2021/11/17 PHP

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

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