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 calc()会计算属性详解
Feb 27 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
CSS list-style-type属性使用方法
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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
Zend的Registry机制的使用说明
2013/05/02 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
表单内同名元素的控制
2006/11/22 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
对python requests发送json格式数据的实例详解
2018/12/19 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python实现微信小程序支付功能
2019/07/25 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
django下创建多个app并设置urls方法
2020/08/02 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
关于毕业的中学校园广播稿
2014/01/26 职场文书
打架检讨书500字
2014/01/29 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
团干部培训班心得体会
2016/01/06 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python