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的新特性介绍
Oct 31 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
css3 选择器
May 11 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
ZF等常用php框架中存在的问题
2008/01/10 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
python类的继承实例详解
2017/03/30 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Django之PopUp的具体实现方法
2019/08/31 Python
python编写俄罗斯方块
2020/03/13 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
社区母亲节活动记录
2014/03/06 职场文书
初中英语课后反思
2014/04/25 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸