纯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效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...
随机推荐
- Python3基础 print与,结合 一次输出多个数据
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- NTT
1 问题描述FFT问题解决的是复数域上的卷积.如果现在的问题是这样:给出两个整数数列$Ai,Bj,0\leq i\leq n-1,0\leq j\leq m-1$,以及素数$P$,计算新数列$Ci=( ...
- linux 中 ll 命令如何让查询结果按时间升序或降序排序？
-t选项的功能是使输出的结果将以时间降序排列.如果希望按时间的升序排列,可以使用管道符将返回的结果传入tac命令.用法示例:查询当前目录的文件并以降序排列: ll -t查询当前目录的文件并以升序排列: ...
- [CF738D]Sea Battle（贪心）
题目链接:http://codeforces.com/contest/738/problem/D 题意:1*n的格子里有a条长为b的船.有一个人射了k发子弹都没打中船,现在问最少再打多少次一定能保证射 ...
- [Gym]2008-2009 ACM-ICPC, NEERC, Moscow Subregional Contest
比赛链接:http://codeforces.com/gym/100861 A模拟,注意两个特殊的缩写. #include <bits/stdc++.h> using namespace ...
- 【原创分享】python获取乌云最新提交的漏洞，邮件发送
#!/usr/bin/env python # coding:utf-8 # @Date : 2016年4月21日 15:08:44 # @Author : sevck (sevck@jdsec.co ...
- linux系统：rm-rf执行以后，怎么办？我来教你恢复文件。
记得我当时也犯过这个错误 rm -rf /* 傻傻的盯着屏幕看... 还好当时是在自己的虚拟机里,没什么数据,打镜像恢复回来就好了.今天看到这篇文章,备用!嗯 是的 万一哪天脑抽了 --------- ...
- ZOJ-2362 Beloved Sons 最大权值匹配
题意:国王有N个儿子,现在每个儿子结婚都能够获得一定的喜悦值,王子编号为1-N,有N个女孩的编号同样为1-N,每个王子心中都有心仪的女孩,现在问如果安排,能够使得题中给定的式子和最大. 分析:其实题目 ...
- 文件MD5校验
1. 以前记得是在 msdn.itellyou.cn 上下载的 MD5 校验工具,应该是 IHasher,但是现在 msdn.itellyou.cn 上搜不到这个工具了... 2.
- Win7_提高性能
1. 设置成经典主题:桌面->右键->个性化->经典主题 2. 计算机->右键->属性->高级系统设置 ==> 系统属性->高级->性能-> ...