思想：使用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. 《第一行代码 android》 读书笔记：找出当前界面对应的Activity

    在android开发中找出当前界面对应的Activity,步骤如下: 新建一个BaseActivity继承自Activity,然后在BaseActivity中重写onCreate()方法,通过getC ...

  2. ASCII Art (English)

    Conmajia, 2012 Updated on Feb. 18, 2018 What is ASCII art? It's graphic symbols formed by ASCII char ...

  3. Zabbix的网络发现

      Zabbix的网络发现 Zabbix的网络发现功能,可以让我们发现网络中的主机或者服务,并在发现该设备后做出相应的操作; 它可以用HTTP.ICMP.SSH.LDAP.TCP.SNMP.Telne ...

  4. 【Java】多线程初探

     参考书籍:<Java核心技术 卷Ⅰ >   Java的线程状态   从操作系统的角度看,线程有5种状态:创建, 就绪, 运行, 阻塞, 终止(结束).如下图所示     而Java定义的 ...

  5. 04-PHP-redis

    [Redis] 先安装tcl: yum install tcl   [下载和安装] 官网http://redis.io/  下载最新的稳定版本,这里是3.2.0, 然后解压文件并进入. $ sudo ...

  6. jstl c标签 ”test does not support runtime expressions“

    将jstl 的uri <%@ taglib prefix="c" uri="http://Java.sun.com/jstl/core" %>(没有 ...

  7. python实现三级菜单

    一.要求: 1.一开始打印出所有省份和提示 2.用户输入省份以此查询城市 3.在按照输出的城市名提示用户输入,最后输出用户所查询的区县名 4.随时输入"back"可以返回上一级菜单 ...

  8. NumPy学习_00 ndarray的创建

    1.使用array()函数创建数组 参数可以为:单层或嵌套列表:嵌套元组或元组列表:元组或列表组成的列表 # 导入numpy库 import numpy as np # 由单层列表创建 a = np. ...

  9. 《android开发艺术探索》读书笔记（五）--RemoteViews

    接上篇<android开发艺术探索>读书笔记(四)--View工作原理 No1: RemoteViews使用场景:通知栏和桌面小部件 No2: 通知栏主要通过NotificationMan ...

  10. 在kali安装中文输入法的教程

    1终端下vi /etc/apt/sources.list  修改镜像元  (按E进行编辑 具体实例不同可能没有)  按 i进入编辑 擦除原有的几个官方源改为deb http://mirrors.ali ...