纯css3代码写下拉菜单效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no">
<title>CSS3树形菜单</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: #eee;font-size: 14px;font-family: "微软雅黑";}
ul, li{list-style: none;}
a{color: #fff;text-decoration: none;}
.nav{
width: 210px;
background: #b92422;
}
.nav ul li{
position: relative;
}
.nava{
width: 200px;
display: block;
height: 35px;
line-height: 35px;
padding-left: 10px;
border-bottom: 1px solid #911c1c;
box-shadow: 0 1px 1px #d03b39 inset;
color: #fff;
}
.nav ul li span{
position: absolute;
top: 5px;
right: 5px;
height: 20px;
line-height: 20px;
background: #9e1919;
padding: 0 5px;
font-size: 12px;
}
.ntext{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.ntext a{
display: block;
background: #9e1919;
border-bottom: 1px solid #821717;
height: 30px;
line-height: 30px;
padding-left: 15px;
-webkit-transition:all 500ms linear;
-moz-transition:all 500ms linear;
-ms-transition:all 500ms linear;
-o-transition:all 500ms linear;
transition:all 500ms linear;
}
.ntext a:hover{
background: #ff6600;
color: #fff;
}
.nav ul li .ntext{height: 0;overflow: hidden;}
.nav ul li:target .ntext{height: auto;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li id="n1">
<a href="#n1" class="nava">IT培训<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n2">
<a href="#n2" class="nava">语言培训<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n3">
<a href="#n3" class="nava">亲子课堂<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n4">
<a href="#n4" class="nava">中小学/大学<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1;user-scale=no">
<title>CSS3树形菜单</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: #eee;font-size: 14px;font-family: "微软雅黑";}
ul, li{list-style: none;}
a{color: #fff;text-decoration: none;}
.nav{
width: 210px;
background: #b92422;
}
.nav ul li{
position: relative;
}
.nava{
width: 200px;
display: block;
height: 35px;
line-height: 35px;
padding-left: 10px;
border-bottom: 1px solid #911c1c;
box-shadow: 0 1px 1px #d03b39 inset;
color: #fff;
}
.nav ul li span{
position: absolute;
top: 5px;
right: 5px;
width:0;
height:0;
border-width:10px;
border-style:dashed dashed dashed solid;
border-color:transparent transparent transparent #fff;
text-indent: -999px;
}
.ntext{
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-ms-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.ntext a{
display: block;
background: #9e1919;
border-bottom: 1px solid #821717;
height: 30px;
line-height: 30px;
padding-left: 15px;
-webkit-transition:all 500ms linear;
-moz-transition:all 500ms linear;
-ms-transition:all 500ms linear;
-o-transition:all 500ms linear;
transition:all 500ms linear;
}
.ntext a:hover{
background: #ff6600;
color: #fff;
}
.nav ul li .ntext{height: 0;overflow: hidden;}
.nav ul li:target .ntext{height: auto;}
.nav ul li:target a span{
border-style:solid dashed dashed dashed;
border-color:#fff transparent transparent transparent;
top:15px;
right: 15px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li id="n1">
<a href="#n1" class="nava">IT培训<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n2">
<a href="#n2" class="nava">语言培训<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n3">
<a href="#n3" class="nava">亲子课堂<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
<li id="n4">
<a href="#n4" class="nava">中小学/大学<span>更多</span></a>
<div class="ntext">
<a href="#">网页制作</a>
<a href="#">编程语言</a>
<a href="#">编程语言</a>
</div>
</li>
</ul>
</div>
</body>
</html>
纯css3代码写下拉菜单效果的更多相关文章
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- HTML+CSS写下拉菜单
今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...
- 用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
- 下拉菜单效果和tab选项卡切换
//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 基于CSS3金属风格下拉菜单
基于CSS3金属风格下拉菜单,css,金属风格,下拉菜单,CSS3导航. css3按钮:http://www.huiyi8.com/css3/anniu/
- html/css 实现下拉菜单效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS3 3D旋转下拉菜单--兼容性不太好
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- CSS3小清新下拉菜单 简易大方
之前有分享过几款CSS3菜单和jQuery菜单,像这款HTML5/CSS3自定义下拉框 3D卡片折叠动画3D效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...
随机推荐
- C#部署安装,将用户安装路径记录下写入注册表，并启动
安装部署程序,将安装目录写入注册表 (1)在“安装部署项目”上点击“注册表编辑器” (2)在HKey_LOCAL_MACHINE_SoftWare 下新建键 Manufacturer 代表软件的制造商 ...
- 利用JDBC处理mysql大数据--大文本和二进制文件等
转载自http://www.cnblogs.com/xdp-gacl/p/3982581.html 一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob, ...
- CUBRID学习笔记 32 对net的datatable的支持 cubrid教程
在net的驱动中实现理一下的支持 DataTable data populate Built-in commands construct: INSERT , UPDATE, DELETE Column ...
- css 背景色渐变---和背景色透明
1 背景色渐变 background:#fb0000; background: -webkit-gradient(linear, left top, left bottom, color-stop(0 ...
- Yii框架第一步-- 安装
0.首次安装请看 这里 下面的为非首次安装,不需要token的步骤 1.下载composer 官网下载: https://getcomposer.org/download/ 2.开启PHP的opens ...
- Android调用系统 Set As Intent
调用方法如下: Intent intent = new Intent(Intent.ACTION_ATTACH_DATA); intent.addCategory(Intent.CATEGORY_DE ...
- iOS - Swift Struct 结构体
1.Struct 的创建 1.1 基本定义 结构体的定义 // 定义结构体数据类型 struct BookInfo { // 每个属性变量都必须初始化 var ID:Int = 0 var Name: ...
- Mysql数据库实践操作之————批量插入数据（100万级别的数据）
第一种方法:使用insert into 插入 从Redis每次获取100条数据,根据条件去插入到Mysql数据库中: 条件: 如果当前队列中的值大于1000条,则会自动的条用该方法,该方法每次获取从队 ...
- Git学习（1）Git 简介
Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件. Git ...
- thinkphp3.2+PHPExcel导出查询数据到excel表格的实例
首先下载PHPExcel插件,我们需要把PHPExcel.php和PHPExcel文件夹放到D:\XAMPP\htdocs\fsxb\ThinkPHP\Library\Vendor\PHPExcel目 ...