纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单。先上图：

1、html5布局

 <html>

 <head>

     <meta charset="UTF-8">

     <title>水平导航菜单</title>

     <link rel="stylesheet" href="reset.css">

     <link rel="stylesheet" href="style.css">

 </head>

 <body>

     <header class="header">

         <nav class="menu radius">

             <ul class="nav">

                 <li><a href="#">首页</a></li>

                 <li>

                     <a href="#">菜单项</a>

                     <ul>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                     </ul>

                 </li>

                 <li>

                     <a href="#">菜单项</a>

                     <ul>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                     </ul>

                 </li>

                 <li>

                     <a href="#">菜单项</a>

                     <ul>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                     </ul>

                 </li>

                 <li>

                     <a href="#">菜单项</a>

                     <ul>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                         <li>

                             <a href="#">二级菜单项</a>

                             <ul>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                                 <li><a href="#">三级菜单项</a></li>

                             </ul>

                         </li>

                     </ul>

                 </li>

             </ul>

         </nav>

     </header>

 </body>

 </html>

2、导航菜单核心样式表style.css

 .header{

     width:960px;

     margin-left: auto;

     margin-right: auto;

     margin-top:30px;

     margin-bottom:30px;

 }

 .menu{

     background-color:#333333;

     position: relative;

     font-size: 14px;

 }

 .nav > li{

     display: inline-block;

     position: relative;

 }

 .nav > li > a{

     padding-top:0.5em;

     padding-bottom:0.5em;

     padding-left: 2em;

     padding-right: 2em;

     text-decoration:none;

 }

 .nav > li:hover > a{

     background-color:rgb(255, 255,0);

     color:rgb(0, 0, 0);

 }

 .nav a{

     color:#f5f5f5;

     display: block;

     text-decoration: none;

 }

 .nav  ul{

     display: none;

     position:absolute;

     background-color:transparent;

 }

 .nav  ul li{

     position:relative;

 }

 .nav  ul li + li{

     border-top: 1px solid rgb(70, 70, 70);

 }

 .nav > li:hover > ul{

     display: block;

     padding-top: 0.4em;

 }

 .nav > li > ul > li > a{

     padding-top:0.4em;

     padding-bottom:0.4em;

     width: 10em;

     padding-left: 1em;

     padding-right: 1em;

     background-color: rgb(50, 50, 50);

 }

 .nav > li > ul > li:hover > a{

     background-color:rgb(255, 255,0);

     color:rgb(0, 0, 0);

 }

 .nav > li > ul > li > ul{

     left:100%;

     top:;

 }

 .nav > li:last-child > ul > li > ul{

     left:-100%;

     top:;

 }

 .nav > li > ul > li:hover >ul {

     display: block;

 }

 .nav > li > ul > li > ul > li > a{

     padding-top:0.4em;

     padding-bottom:0.4em;

     width: 10em;

     padding-left: 1em;

     padding-right: 1em;

     background-color: rgb(50, 50, 50);

 }

 .nav > li > ul > li > ul > li:hover > a{

     background-color:rgb(255, 255,0);

     color:rgb(0, 0, 0);

 }

3、全局样式表reset.css

 article,

 aside,

 details,

 figcaption,

 figure,

 footer,

 header,

 hgroup,

 main,

 nav,

 section,

 summary {

     display: block;

 }

 audio,

 canvas,

 video {

     display: inline-block;

 }

 audio:not([controls]) {

     display: none;

     height:;

 }

 [hidden],

 template {

     display: none;

 }

 html {

     -ms-text-size-adjust: 100%;

     -webkit-text-size-adjust: 100%;

 }

 a {

     background: transparent;

 }

 a:focus {

     outline: thin dotted;

 }

 a:active,

 a:hover {

     outline:;

 }

 abbr[title] {

     border-bottom: 1px dotted;

 }

 b,

 strong {

     font-weight: bold;

 }

 dfn {

     font-style: italic;

 }

 hr {

     -moz-box-sizing: content-box;

     box-sizing: content-box;

     height:;

 }

 mark {

     background: #ff0;

     color: #000;

 }

 code,

 kbd,

 pre,

 samp {

     font-family: monospace, serif;

     font-size: 1em;

 }

 pre {

     white-space: pre-wrap;

 }

 q {

     quotes: "\201C" "\201D" "\2018" "\2019";

 }

 small {

     font-size: 80%;

 }

 sub,

 sup {

     font-size: 75%;

     line-height:;

     position: relative;

     vertical-align: baseline;

 }

 sup {

     top: -0.5em;

 }

 sub {

     bottom: -0.25em;

 }

 img {

     border:;

 }

 svg:not(:root) {

     overflow: hidden;

 }

 figure {

     margin:;

 }

 fieldset {

     border: 1px solid #c0c0c0;

     margin: 0 2px;

     padding: 0.35em 0.625em 0.75em;

 }

 legend {

     border:;

     padding:;

 }

 button,

 input,

 select,

 textarea {

     font-family: inherit;

     font-size: 100%;

     margin:;

 }

 button,

 input {

     line-height: normal;

 }

 button,

 select {

     text-transform: none;

 }

 button,

 html input[type="button"],

 input[type="reset"],

 input[type="submit"] {

     -webkit-appearance: button;

     cursor: pointer;

 }

 button[disabled],

 html input[disabled] {

     cursor: default;

 }

 input[type="text"]:hover,

 input[type="text"]:focus,

 input[type="text"]:active {

     border: 1px solid #CCC;

 }

 input[type="checkbox"],

 input[type="radio"] {

     box-sizing: border-box;

     padding:;

 }

 input[type="search"] {

     -webkit-appearance: textfield;

     -moz-box-sizing: content-box;

     -webkit-box-sizing: content-box;

     box-sizing: content-box;

 }

 input[type="search"]::-webkit-search-cancel-button,

 input[type="search"]::-webkit-search-decoration {

     -webkit-appearance: none;

 }

 button::-moz-focus-inner,

 input::-moz-focus-inner {

     border:;

     padding:;

 }

 textarea {

     overflow: auto;

     vertical-align: top;

 }

 table {

     border-collapse: collapse;

     border-spacing:;

 }

 body,

 div,

 ol,

 ul,

 li,

 h1,

 h2,

 h3,

 h4,

 h5,

 h6,

 p,

 span,

 th,

 td,

 dl,

 dd,

 form,

 fieldset,

 legend,

 input,

 textarea,

 select {

     margin: 0 auto;

     padding:;

     border:;

 }

 /* Global */

 body {

     color: #444;

     background: #FFF;

     font: 12px/24px "Microsoft Yahei", Arial, Verdana, Tahoma, Sans-Serif;

 }

 ul,

 ol,

 li {

     list-style: none;

 }

 table,

 td,

 th,

 input {

     font-size: 12px;

 }

 h1,

 h2,

 h3,

 h4,

 h5,

 h6 {

     font-weight: normal;

 }

 h1 {

     font-size: 28px;

 }

 h2 {

     font-size: 18px;

 }

 h3 {

     font-size: 16px;

 }

 h4 {

     font-size: 14px;

 }

 h5,

 h6 {

     font-size: 12px;

 }

 .inner {

     overflow: hidden;

 }

 .clearfix {

     clear: both;

     font-size: 1px;

     width: 1px;

     height:;

     visibility: hidden;

     margin-top: 0px!important;

     *margin-top: -1px;

     line-height: 0

 }

 .radius {

     border-radius: 3px;

     -moz-border-radius: 3px;

     -webkit-border-radius: 3px;

 }

 .opacity {

     opacity: 0.5;

     filter: "alpha(opacity=50)";

     filter: alpha(opacity=50);

 }

 .folio-thumb img {

     width: 100%;

     -webkit-backface-visibility: hidden;

     -moz-backface-visibility: hidden;

     -ms-backface-visibility: hidden;

     backface-visibility: hidden;

     -webkit-transition-duration: 0.7s;

     -moz-transition-duration: 0.7s;

     -ms-transition-duration: 0.7s;

     -o-transition-duration: 0.7s;

 }

 .folio-thumb:hover img {

     -webkit-transform: scale(1.3);

     -moz-transform: scale(1.3);

     -o-transform: scale(1.3);

     -ms-transform: scale(1.3);

 }

 .mediaholder {

     overflow: hidden;

 }

 a:link,

 a:visited {

     color: #444;

     outline:;

     text-decoration: none;

 }

 a:hover {

     color: #005BB5;

     text-decoration: underline;

     /* -webkit-transition:color 0.4s ease; -moz-transition:color 0.4s ease; -o-transition:color 0.4s ease; -ms-transition:color 0.4s ease; transition: color 0.4s ease;*/

 }

纯css实现的三级水平导航菜单的更多相关文章

纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
纯HTML+CSS带说明的黄色导航菜单
HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件 ...
纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
用纯css改变select的下拉菜单
select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...
jquery水平导航菜单展示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
纯css实现Magicline Navigation(下划线动画导航菜单)
看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...
CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

随机推荐

url加密并计算时间
将URL地址参数进行加密传输提高网站安全性加密算法,直接调用就好 function keyED($txt,$encrypt_key){ $encrypt_key = md5($encrypt_key ...
QuickFont使用中的3D物体消失问题
使用基于OpenTK的QuickFont显示字体的时候,会遇到绘制的3D物体消失的问题. 搜索OpenTK的论坛后,解决办法如下: 在执行QFont.End()语句后,再后面添加GL.Disable( ...
Hadoop Hive概念学习系列之hive里的索引（十三）
Hive支持索引,但是Hive的索引与关系型数据库中的索引并不相同,比如,Hive不支持主键或者外键. Hive索引可以建立在表中的某些列上,以提升一些操作的效率,例如减少MapReduce任务中需要 ...
POJ3617：Best Cow Line （贪心&&后缀数组）
FJ is about to take his N (1 ≤ N ≤ 2,000) cows to the annual"Farmer of the Year" competiti ...
Windows下手动安装redis服务
1.Redis本身不支持windows,但是有另外的团队在维护着一个windows下的版本 2.下载地址: https://github.com/MSOpenTech/redis 2.8的版本在源 ...
bzoj 4668 冷战 —— 并查集按秩合并
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4668 按秩合并维护并查集的树结构,然后暴力找路径上的最大边权即可. 代码如下: #inclu ...
MQTT、CoAP
实时协议是物联网的一项根本性技术,在物联网领域发挥了重大的作用.目前物联网设备所广泛使用的四大实时协议:XMPP.HTTP.CoAP以及MQTT等可谓各擅所长.亦各有弊端. 那么在万物互联的时代,谁主 ...
mysql 联合2个列的数据然后呈现出来
SELECT a.voyageNum,CONCAT(a.startDate,'~',a.endDate) AS 日期 FROM tchw_voyageoilcost a ,tchw_voyageoi ...
PCB 铜皮(Surface)折线多边形扩大缩小实现(第一节）
继续铜皮多边形的相关的算法, 如何用代码实现多边形的扩大与缩小,这部份内容准备分为四节内容来讲解, 第一节,折线多边形的扩大缩小(不包含圆弧) 此篇讲第一节第二节,带圆弧的多边形的扩大缩小第三 ...
bzoj 1061: [Noi2008]志愿者招募【最小费用最大流】
神奇的建图:连接(s,1,inf,0)(n+1,t,inf,0),对于1~n连接(i,i+1,inf-a[i],0),对于每个志愿者(s,t,c),连接(s,t+1,inf,c). 因为从s开始的流是 ...

纯css实现的三级水平导航菜单

纯css实现的三级水平导航菜单的更多相关文章

随机推荐

热门专题