思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。

1、纯CSS二级导航下拉菜单代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" content="text/html" http-equiv="content-type">

     <title>纯css二级导航下拉菜单</title>

     <meta name="keyword" content="关键字">

     <meta name="description" content="描述">

     <style type="text/css">

         *{margin: 0;padding: 0;}

         #bg{background: red;width: 100%;height: 35px;}

         nav{height: 35px;width: 1000px;margin: 0 auto;}

         nav ul li{list-style-type:none;float: left}

         nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;

                     color:white;font-fimily:微软雅黑;}

         nav ul li ul li{float: none}

         nav ul li ul li a{color:black}

         nav ul li ul{display: none;}

         nav ul li:hover ul{display: block;}

     </style>

 </head>

 <body>

 <div id="bg">

 <nav>

     <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>

         </ul>

         </li>

         <li><a href="#">一级导航</a>

             <ul>

                 <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>

             </ul>

         </li>

         <li><a href="#">一级导航</a>

             <ul>

                 <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>

             </ul>

         </li>

         <li><a href="#">一级导航</a>

             <ul>

                 <li><a href="#">二级导航</a></li>

                 <li><a href="#">二级导航</a></li>

             </ul>

         </li>

     </ul>

 </nav>

 </div>

 </body>

 </html>

2、运行效果:

源码：纯CSS实现二级导航下拉菜单.zip

备注：

　　文章为本人原创  转载请注明出处  文章难免会有纰漏之处  还望大家多多包含  如有意见或者建议可与本人联系  本人QQ：2187093468（非诚请勿扰，加好友请备注在哪里看到的）

纯CSS实现二级导航下拉菜单--css的简单应用的更多相关文章

  1. 用jquery制作一个二级导航下拉菜单

    1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素.       3通过使用show()方法来显示HTML元素.       4通过 ...

  2. js二级导航下拉菜单

    <!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...

  3. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  4. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  5. 纯CSS3实现淡入淡出下拉菜单

    纯CSS3实现淡入淡出下拉菜单是一款比较简单清新的CSS3教程下拉菜单,这款下拉菜单是垂直方向的,点击主菜单项可以展开和折叠子菜单,在展开折叠的过程中伴随着淡入淡出的动画效果 源代码:http://w ...

  6. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  7. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 兼容ie7的导航下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

随机推荐

  1. html中meta标签及用法理解

    自己一直想成为高级前端开发工程师,而自学.奈何最近感觉自学收效甚微,一度迷茫. 不破不立,打算改变这样的状态. 春节后上班第一天,今年打算好好实现自己的前端梦想. 重新整理.总结前端技术. 废话,就不 ...

  2. [Python Study Notes]内存信息

    ''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...

  3. Go学习笔记03-附录

    第三部分 附录 A. 工具 1. 工具集 1.1 go build gcflags ldflags 更多参数: go tool 6g -h 或 [https://golang.org/cmd/gc/] ...

  4. dedecms实现编辑文章时不自动修改发布时间

    dedecms默认编辑文章时自动修改文章的发布时间,如何让它不自动修改发布时间呢? 找到后台编辑文章的模板文件稍作调整即可. 文件/dede/templets/artical_edit.htm 把 $ ...

  5. MySQL数据库基础（二）（约束以及修改数据表）

    一,约束以及修改数据表 约束的作用?1.约束保证数据的完整性.一致性:2.约束分为表级约束.列级约束:3.约束类型包括:NOT NULL(非空约束).PRIMARY KEY(主键约束).UNIQUE ...

  6. Ubantu16.04 redis安装

    通过FTP方式将redis的安装包从windows上传到linux上 解压命令:$sudo tar -zxf ~/Downloads/redis-3.2.7.tar.gz -C /usr/local ...

  7. 基于JDK1.8的ConcurrentHashMap分析

    之前看过ConcurrentHashMap的分析,感觉也了解的七七八八了.但昨晚接到了面试,让我把所知道的ConcurrentHashMap全部说出来. 然后我结结巴巴,然后应该毫无意外的话就G了,今 ...

  8. Egret学习笔记 (Egret打飞机-2.开始游戏)

    打开 Egret Wing,新建一个Egret游戏项目,然后删掉默认生成的createGameScene方法里面的东西 然后新建一个BeginScene.ts的文件,作为我们的游戏的第一个场景 cla ...

  9. properties基本用法

    package control; import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io. ...

  10. windows转mac-开发环境搭建（二）：mac上java环境搭建

    1.首先下载jdk,地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.安 ...