思想：使用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. Azure ARM (20) 将非托管磁盘虚拟机(Unmanage Disk)，迁移成托管磁盘虚拟机(Manage Disk)

    <Windows Azure Platform 系列文章目录> PowerShell我已经提交到GitHub: https://github.com/leizhang1984/AzureC ...

  2. php环境搭建和第一个php程序

    一.开发环境搭建 因为是初学,使用的还是非常经典的组合appserv+dreamweaver cs6; 1.1   appserv安装 appserv的安装还是非常简单的,直接双击可执行程序appse ...

  3. 用Markdown写微信公众号文章

    目前微信公众号的编辑器是不支持Markdown语法的,那怎么办呢? 有一款叫Markdown Here的插件可以解决这个问题(支持Chrome.Firefox.Safari). 官方网站:http:/ ...

  4. install atom markdown preview plus error

    Installing "markdown-preview-enhanced@0.15.2" failed.Hide output- npm ERR! Darwin 17.2.0 n ...

  5. ecshop QQ邮箱发送邮件服务器配置

    ecshop QQ邮箱发送邮件服务器配置 1.邮件服务:采用其他的SMTP服务 2.邮件服务器是否要求加密连接(SSL): 是 此项设置需要php支持openSSL模块 开启方法: a.php.ini ...

  6. 【国家集训队2010】小Z的袜子[莫队算法]

    [莫队算法][国家集训队2010]小Z的袜子 Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程, ...

  7. CENTOS6.6 下mysql MHA架构搭建

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 本篇是自己搭建的一篇mysql MHA文章 前面的安装步骤基 ...

  8. selenium自动化测试配置工具整理

    firefox浏览器历史版本 网址通道:http://ftp.mozilla.org/pub/firefox/releases/ chromedriver历史版本 网址通道:http://chrome ...

  9. 借腾讯开源 VasDolly，谈谈 Android 签名和多渠道打包的原理！

    一.前言 Hi,大家好,我是承香墨影! 当我们需要发布一款 App 到应用市场的时候,一般需要我们针对不同的市场生产不同的渠道包,它们使用的是同一套代码,只是会包含一些各自的渠道信息,用于我们做数据分 ...

  10. lamp环境部署脚本

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