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图片边框border-image的用法
Jun 30 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 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
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python2.7安装图文教程
2018/03/13 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
大学考试作弊检讨书
2014/01/30 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年财务部工作总结
2015/04/10 职场文书
工作建议书范文
2019/07/08 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
Python 统计序列中元素的出现频度
2022/04/26 Python