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实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
Vue实现简易计算器
2020/02/25 Javascript
解决python 无法加载downsample模型的问题
2018/10/25 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
作为网站管理者应当如何防范XSS
2014/08/16 面试题
创建服务型党组织实施方案
2014/02/25 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
学生偷窃检讨书
2014/09/25 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
针对吵架老公保证书
2015/05/08 职场文书
三方合作意向书范本
2015/05/09 职场文书
儿童诗两首教学反思
2016/02/23 职场文书