纯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效果非常华丽,这次要分享的这款相对比较简单,很适合用在用户的操作面板上.先来看看效果图: 怎 ...
随机推荐
- 谢启鸿谈"如何学好高等代数"
高等代数和数学分析.空间解析几何一起,并称为数学系本科生的三大基础课.所谓基础课,顾名思义,就是本科四年学习的所有数学课程,都是以上述三门课作为基础的.因此对一年级新生而言,学好这三门基础课,其重要性 ...
- 双4G LTE
我们即将上市的Xplay3S将支持双4G LTE(TDD-LTE+FDD-LTE),那什么是4G LTE呢,今天来给大家科普下4G LTE网络知识. 什么是TDD-LTE/FDD-LTE? LTE是通 ...
- 完成Adventure中的主方法
package a; public interface CanSwim { void swim(); } package a; public interface CanFly { void fly() ...
- BZOJ 2668 交换棋子（费用流）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2668 题意:有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子中的棋子,最终达到目标状 ...
- CodeForces 146A Lucky Ticket
Lucky Ticket Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submi ...
- HDU 4442 Physical Examination
Physical Examination Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64 ...
- jquery之wrap(),wrap(),unwrap()方法详解
[注]wrap():为每个匹配元素外面添加指定的HTML结构, wrapAll(): 为所有匹配元素(作为一个整体)外面添加一个指定的HTML结构 原文地址:http://www.365mini.co ...
- Java _ JDK _ Arrays, LinkedList, ArrayList, Vector 及Stack
(最近在看JDK源码,只是拿着它的继承图在看,但很多东西不记录仍然印象不深,所以开始记录JDK阅读系列.) (一)Arrays Arrays比较特殊,直接继承自Arrays ->List(Int ...
- linux留下后门的技巧
在团队内部的wiki上已经写出 http://drops.wooyun.org/tips/1951 http://www.freebuf.com/sectool/10474.html 还有一种方法是写 ...
- linux 通过 ulimit 改善系统性能
https://www.ibm.com/developerworks/cn/linux/l-cn-ulimit/ 概述 系统性能一直是一个受关注的话题,如何通过最简单的设置来实现最有效的性能调优,如何 ...