纯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效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...
随机推荐
- SqlSever基础 datediff 计算两个时间相差多少年份
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
- java properties读取与设值
import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream; ...
- Nodejs之socket广播
nodejs发送udp广播还是蛮简单的,我们先写个服务器用于接收广播数据,代码如下: var dgram = require("dgram"); var server = dgra ...
- libreoffice实现WORD文档转PDF文档
一.安装LibreOffice 官网:http://www.libreoffice.org/ 二.CentOS安装yum yum install libreoffice 三.执行转换命令 libreo ...
- WEB前端开发工具的初识
准备学习BootStrap,然后发现好多插件啊…… 从一个开源项目开始学习吧. required node.js & bower & grunt $ git clone https:/ ...
- Have You Ever Wondered About the Difference Between NOT NULL and DEFAULT?
https://blog.jooq.org/2014/11/11/have-you-ever-wondered-about-the-difference-between-not-null-and-de ...
- SQL触发器，数据库
触发器类型有两种: 1.AFTER(FOR)触发器 在动作执行之后触发(增删改执行完成后,触发器中的代码再执行),不能为视图指定for触发器,只能为表指定该触发器. 2.instead of触发器 可 ...
- hdu 4828 Grids 卡特兰数+逆元
Grids Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Problem D ...
- read 隐藏用户输入
有时会需要脚本用户进行输入,但不希望输入的数据显示在监视器上,典型的例子就是输入密码,当然还有很多其它类型的数据需要隐藏.-s选项就能够使read命令中输入的数据不现实在监视器上(实际上,数据是显示的 ...
- 【FFT-快速傅立叶变换】
HDU-1402 A * B Problem Plus 题意:给定两个整数,整数的长度最多能达到50000位,输出两个整数的乘积. 分析:题意非常的明了,一个惊世骇俗的想法是使用两个数组将整数保留起来 ...