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中的clip-path使用攻略
Aug 03 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
CSS font-variation 可变字体的魅力(实例详解)
Mar 03 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 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
浅析Python函数式编程
2018/10/06 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
毕业生自我推荐
2013/11/04 职场文书
大学学生个人总结
2015/02/15 职场文书
欠条范文
2015/07/03 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书