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字体效果的设置方法小结
Jun 13 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 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 获取ip地址代码汇总
2015/07/05 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
JS快速实现简单计算器
2020/04/08 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
2020/04/28 Javascript
python使用win32com库播放mp3文件的方法
2015/05/30 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
Python 如何展开嵌套的序列
2020/08/01 Python
Python 发送邮件方法总结
2020/08/10 Python
使用Python封装excel操作指南
2021/01/29 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
青年创业培训欢迎词
2014/01/08 职场文书
长辈证婚人证婚词
2014/01/09 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
高中教师评语大全
2014/04/25 职场文书
母亲节演讲稿
2014/05/27 职场文书