CSS3下的菜单效果
以往我们要实现菜单，都需要借助Javascript，今天我们用CSS 3与Html 来实现一个纯菜单，首先来看核心的HTML片断代码：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Language</a>
<ul>
<li><a href="#">Java</a></li>
<li><a href="http://www.cnblogs.com/wintersun/category/85989.html">CSharp</a></li>
<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="http://www.cnblogs.com/wintersun/category/176164.html">.net</a></li>
<li><a href="http://www.cnblogs.com/wintersun/category/65430.html">Database</a></li>
<li><a href="http://www.cnblogs.com/wintersun/category/163639.html">WebDev</a></li>
</ul>
</li>
<li><a href="http://wintersun.cnblogs.com">About</a></li>
</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;
}
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;
}
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;
}
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 是这样的:
注意IE9不支持，希望对您Web开发有帮助。您可以感兴趣的文章:
JQuery实现简单下拉菜单
作者：Petter Liu
出处：http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。
转载于:https://www.cnblogs.com/wintersun/archive/2012/11/30/2795629.html
CSS3下的菜单效果相关推荐
- HTML5 CSS3 下拉菜单效果
A Flash Blue Menu 在线演示 源码下载 Fancy Rolling Navigatio 在线演示 源码下载 Sweet tabbed navigation using ...
- css下拉菜单出现下划线,简单带下划线跟随效果的CSS3下拉菜单特效
简要教程 这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效.该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果. 使用方法 HTML结构 该下 ...
- 10个优秀的 HTML5 CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
- html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
- 用Javascrip写出selelct下拉菜单效果
用Javascrip写出selelct下拉菜单效果 话不多说,先上效果图: html代码: <p>2.模拟selelct下拉菜单</p><div class=" ...
- php下拉菜单指示图标如何添加,jquery实现很酷的网页顶部图标下拉菜单效果
本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实 ...
- HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...
- 用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果 下拉菜单效果展示 代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
- 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
最新文章
- eclipse java环境配置
- PKU 1062 昂贵的聘礼
- 泰山JDK8率先支持多种权重（笔画粗细）的字体绘制
- python3标识符_python3学习笔记一（标识符、关键字）
- ESP8266之ESP8266WebServer库学习
- 迷你屏+OLED好屏：个性专业两手抓 华硕灵耀X 14专业好屏体验
- java对服务器进行监控_java服务器状态监控实现
- 快速给视频批量添加水印，操作简单
- 先天八卦图的排列顺序，这样来解释您能接受吗？
- python 华为交换机自动配置_对python连接华为交换机批量配置优化
- 综合日语第一册动词复习
- h5打开QQ聊天 就一句话
- 达梦数据库监控-DEM 部署
- linux进程调度算法,关于嵌入式Linux系统实时进程调度算法系统详解
- 偏移变色lisp_直线偏移联动 - AutoLISP/Visual LISP 编程技术 - CAD论坛 - 明经CAD社区 - Powered by Discuz!...
- 从表征到行动---意向性的自然主义进路（续二）
- Kubernetes Pod冗余策略
- Robomongo简介
- 神经网络与卷积神经网络,卷积神经网络运用
- 【论文笔记】Exploring Temporal Coherence for More General Video Face Forgery Detection