css3 二级菜单
<!doctype html>
<!--<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。-->
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src=""></script><!--引入的js src是引入的js样式路径-->
<link rel="stylesheet" href="" /><!--引入的css页面的样式 href是引入的css样式路径-->
<!--当前页面的三要素-->
<title>示例-导航</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<style type="text/css">
*{margin:0;padding:0}
body{font-family:"微软雅黑";font-size:14px;}
.wf_cont{width:400px;height:600px;margin:100px auto;}
a{text-decoration:none;}
ul li{list-style-type:none;}
nav{width:208px;height:;margin:10px auto;}
nav>ul>li{background:#C6321F;}
nav>ul>li>a{color:#fff;line-height:40px;padding-left:15px;box-shadow:0 1px 1px #d03b39 inset;border-bottom:1px solid #9llclc;
display:block;height:40px;
font-weight:700;
position:relative;
}
nav>ul>li>a>span{
position:absolute;
right:10px;top:8px;
padding:2px 5px;
height:20px;
background:#9e1919;
line-height:20px;
color:#f67d7b;
font-weight:none;
}
nav>ul>li>a:hover{background:#D53A27;}
nav>ul>li>a:hover span{color:#fff;}
nav>ul>li>ul{
background:#9A2817;
}
nav>ul>li>ul>li>a {
color:#d4f4f4;
height:35px;
line-height:35px;
padding-left:15px;
display:block;
border-bottom:1px solid #821717;
}
nav>ul>li>ul>li>a:hover{
background:#FF7400;
color:#fff;
}
nav>ul>li>ul{
height:0;overflow:hidden;
}
/*css 鼠标点击事件*/
nav>ul>li:target ul{
height:auto;
}
</style>
</head>
<body>
<div class="wf_cont">
<nav>
<ul><!--通过点击li 》 nav1 》#nav1 改变ul高度-->
<li id="nav1">
<a href="#nav1">IT培训 <span class="navmore">更多</span></a>
<ul>
<li><a target="_balank"href="javascript:void(0)">网页制作</a></li>
<li><a href="javascript:void(0)">java</a></li>
<li><a href="javascript:void(0)">C++</a></li>
<li><a href="javascript:void(0)">Mysql</a></li>
<li><a href="javascript:void(0)">javascript</a></li>
<li><a href="javascript:void(0)">jquery</a></li>
</ul>
</li>
<li id="nav2">
<a href="#nav2">中小学/大学<span class="navmore">更多</span></a>
<ul>
<li><a href="javascript:void(0)">网页制作</a></li>
<li><a href="javascript:void(0)">java</a></li>
<li><a href="javascript:void(0)">C++</a></li>
<li><a href="javascript:void(0)">Mysql</a></li>
<li><a href="javascript:void(0)">javascript</a></li>
<li><a href="javascript:void(0)">jquery</a></li>
</ul>
</li>
<li id="nav3">
<a href="#nav3">亲子课堂<span class="navmore">更多</span></a>
<ul>
<li><a href="javascript:void(0)">网页制作</a></li>
<li><a href="javascript:void(0)">java</a></li>
<li><a href="javascript:void(0)">C++</a></li>
<li><a href="javascript:void(0)">Mysql</a></li>
<li><a href="javascript:void(0)">javascript</a></li>
<li><a href="javascript:void(0)">jquery</a></li>
</ul>
</li>
<li id="nav4">
<a href="#nav4">语言培训<span class="navmore">更多</span></a>
<ul>
<li><a href="javascript:void(0)">网页制作</a></li>
<li><a href="javascript:void(0)">java</a></li>
<li><a href="javascript:void(0)">C++</a></li>
<li><a href="javascript:void(0)">Mysql</a></li>
<li><a href="javascript:void(0)">javascript</a></li>
<li><a href="javascript:void(0)">jquery</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
css3 二级菜单的更多相关文章
- Bootstrap系列 -- 40. 导航条二级菜单
在导航条中添加二级菜单也非常简单 <div class="navbar navbar-default" role="navigation"> < ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- 个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- 8款极具表现力的jQuery/CSS3网页菜单
上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向 ...
- Excel——使用OFFSET、MATCH、COUNTA实现二级菜单
如图所示,接下来提供两种办法实现: 1.将A.B.C.D定义为名称NAME. 2.设置一级菜单单元格数据有效性为NAME. 3.设置二级菜单格数据有效为: =OFFSET($A$1,MATCH($A6 ...
- Jquery垂直下拉二级菜单
自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- Session实现原理分析
http://www.jb51.net/article/77726.htm PHP第一次会话时会有Set-Cookie响应头返回,设置上PHPSESSID cookie Cache-Control: ...
- RAMPS1.4 3d打印控制板接线与测试
“工欲善其事,必先利其器”,在开始工作之前,你应该准备下面所说的工具(包括软件和硬件). 1.需要下载的软件 1.1 固件上传工具——Arduino IDE 这是上传固件的必备工具,有了这个软件让上传 ...
- 0007-20180403-python-自动化基础学习000--while-if 循环实操
python-自动化基础学习000 Python 3.5.1 (v3.5.1:37a07cee5969, Dec 6 2015, 01:54:25) [MSC v.1900 64 bit (AMD64 ...
- photoshop cc 安装失败 2%
photoshop cc 安装失败 2% C盘--Program Files---Common Files--Adobe--caps ,把这个文件夹中的文件全部删除,然后再安装 C:\Pr ...
- python 文本处理操作
打开和关闭文件 open 函数 用Python内置的open()函数打开一个文件,创建一个file对象,相关的方法才可以调用它进行读写 ''' 模式 描述 r 以只读方式打开文件.文件的指针将会放在文 ...
- 破解网页右键被禁止js
按F12,点击console输入一下内容后按回车 javascript:alert(document.onselectstart = document.oncontextmenu= document. ...
- P4027 [NOI2007]货币兑换（斜率优化dp+cdq分治）
P4027 [NOI2007]货币兑换 显然,如果某一天要买券,一定是把钱全部花掉.否则不是最优(攒着干啥) 我们设$f[j]$为第$j$天时用户手上最多有多少钱 设$w$为花完钱买到的$B$券数 $ ...
- Python 静态方法，类方法，属性方法
方法的使用 静态方法 - 只是名义上归类管理,实际上在静态方法里访问不了类或实例中的任何属性. class Dog(object): def __init__(self,name): self.nam ...
- JavaScript 声明全局变量和局部变量
JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量 ...
- kettle 连接 Oracle 异常
场景重现 新安装的 kettle(pdi-ce-7.0.0.0-25) 连接 Oracle 11G R2 报错如下: 解决办法 到 Oracle 官网 JDBC Downloads 下载对应的 ojd ...