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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
Dec 30 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 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的安全策略
2006/10/09 PHP
PHP 简单日历实现代码
2009/10/28 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
js单例模式详解实例
2013/11/21 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
js打造数组转json函数
2015/01/14 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
金鑫耀Java笔试题
2014/09/06 面试题
报社实习生自荐信
2014/01/24 职场文书
事假请假条范文
2014/04/11 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
公务员考察材料范文
2014/12/23 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
学生会任命书范本
2015/09/21 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python