css3实现的下拉菜单效果示例


Posted in HTML / CSS onJanuary 22, 2014

css3实现的下拉菜单效果示例

首先来看核心的HTML片断代码:

复制代码
代码如下:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Language</a>
<ul>
<li><a href="#">Java</a></li>
<li><a href="<a href="https://3water.com/wintersun">CSharp</a></li">https://3water.com/wintersun">CSharp</a></li</a>>
<li><a href="#">Script</a>
<ul>
<li><a href="#">Ruby</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="<a href="https://3water.com/wintersun">.net</a></li">https://3water.com/wintersun">.net</a></li</a>>
<li><a href="<a href="https://3water.com/wintersun">Database</a></li">https://3water.com/wintersun">Database</a></li</a>>
<li><a href="<a href="https://3water.com/wintersun">WebDev</a></li">https://3water.com/wintersun">WebDev</a></li</a>>
</ul>
</li>
<li><a href="<a href="http://wintersun.3water.com">About</a></li">http://wintersun.3water.com">About</a></li</a>>
</ul>
</nav>

接下来定义样式,使用CSS选择器我们可以特异性和先进目标单个元素深埋的HTML结构,而不需要额外的id或类。第一个隐藏子菜单通过瞄准任何UL的在一个UL和 display:block;为了使这些菜单再现他们需要兑换成块元素在悬停的李。这个 >子选择符确保只有孩子UL的李在目标上空盘旋,而不是所有的子菜单出现在一次。然后使用CSS3属性如梯度,盒阴影和边界半径。

复制代码
代码如下:

<style type="text/css">
body
{
background: #efefef;
font-family:Verdana;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}</p> <p>nav ul
{
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after
{
content: "";
clear: both;
display: block;
}</p> <p>nav ul li
{
float: left;
}
nav ul li:hover
{
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a
{
color: #fff;
}
nav ul li a
{
display: block;
padding: 5px 40px;
color: #757575;
text-decoration: none;
}</p> <p>nav ul ul
{
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li
{
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a
{
padding: 5px 40px;
color: #fff;
}
nav ul ul li a:hover
{
background: #4b545f;
}
nav ul ul ul
{
position: absolute;
left: 100%;
top: 0;
}
</style>

最后的效果在Firefox 13.0.1 是这样的:

HTML / CSS 相关文章推荐
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
浅析css3中matrix函数的使用
Jun 06 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
HTML5来实现本地文件读取和写入的实现方法
May 25 HTML / CSS
html+css实现文字折叠特效实例
Jun 02 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
css图标制作教程制作云图标
Jan 19 #HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 #HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 #HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 #HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 #HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 #HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 #HTML / CSS
You might like
php中调用其他系统http接口的方法说明
2014/02/28 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python网站验证码识别
2016/01/25 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python进程和线程用法知识点总结
2019/05/28 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
社团招新策划书
2014/02/04 职场文书
小学家长评语大全
2014/04/16 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
酒店员工管理制度
2015/08/05 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书