思想：使用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. JDBC【PreparedStatment、批处理、处理二进制、自动主键、调用存储过程、函数】

    1.PreparedStatement对象 PreparedStatement对象继承Statement对象,它比Statement对象更强大,使用起来更简单 Statement对象编译SQL语句时, ...

  2. 通过代码配置 Log4net来实现日志记录

    通过代码来创建配置文件,优点看起来更为简洁,不过还得看需求吧,之前我博客也写了一篇通过读取不同的配置文件还实现配置不同日志类型. //记录异常日志数据库连接字符串 private const stri ...

  3. Phalcon调试大杀器之phalcon-debugbar安装

    Phalcon 是一款非常火的高性能C扩展php开发框架.特点是高性能低耦合,但遗憾的是长期缺少一款得力的调试辅助工具. 目前版本主要以Laravel debugbar的具有功能为蓝本开发,并针对ph ...

  4. Apollo学习

    Apollo的配置 参考: Apollo 配置详细步骤(Windows环境) MQTT再学习 -- 搭建MQTT服务器及测试 分布式部署指南 Java客户端使用指南

  5. python学习：收集主机信息

    #!/usr/bin/env python   from subprocess import Popen, PIPE   def getIfconfig():     p = Popen(['ifco ...

  6. python入门学习笔记（三）

    10.函数 求绝对值的函数 abs(x) 也可以在交互式命令行通过 help(abs) 查看abs函数的帮助信息.调用 abs 函数:>>> abs(100)100>>& ...

  7. 拥抱.NET Core系列：MemoryCache 缓存过期

    在上一篇"拥抱.NET Core系列:MemoryCache 初识"中我们基本了解了缓存的添加.删除.获取,那么今天我们来看看缓存的过期机制.这里和上篇一样将把"Micr ...

  8. lamp环境部署脚本

    关于lamp环境的安装脚本,直接复制即可使用 注:apache2.2.X 版本和apache2.4.X版本 本人推荐兼容性版本安装 apache2.4.25 + apr1.5.2 + apr-util ...

  9. PHP中::的使用

    访问静态变量,静态属性,const修饰的变量.

  10. PHP安全、Sql防注入安全汇总

    利用Mysqli和PDO 产生原因 主要就是一些数据没有经过严格的验证,然后直接拼接 SQL 去查询.导致漏洞产生,比如: $id = $_GET['id']; $sql = "SELECT ...