思想：使用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. typeof面试题解答

    面试题 alert(typeof null); // object alert(typeof undefined); // undefined alert(typeof NaN); // number ...

  2. laravel中实现短信发送验证码

    前段时间想实现一个短信验证码的功能,但是卡了很长时间. 首先我用的是阿里云的短信服务业务,其首次接入流程如下: 在阿里云上开通短信服务后需要做的: 1,申请签名  2,申请模板   3,创建Acces ...

  3. better-scroll 源码分析

    我写该文章,主要是想结合代码探究 better-scroll 是如何处理下列操作的.该过程如下图,用文字描述为:手指触摸屏幕,向上快速滑动,最后在手指离开屏幕后,内容获得动量继续滚动,到头部后在移动一 ...

  4. Java经典编程题50道之四十

    将几个字符串排序(按英文字母的顺序). public class Example40 {    public static void main(String[] args) {        Stri ...

  5. bzoj 1188 [HNOI2007]分裂游戏 SG函数 SG定理

    [HNOI2007]分裂游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1394  Solved: 847[Submit][Status][Dis ...

  6. ASP.NET与ASP.NET MVC 的差异、优点及缺点

    众所周知,在微软的编程语言发展历史中,asp.net是不得不提的一个重要的发展阶段,它具有快速开发.层级明确的优点,但最大的缺点,同时也是它逐渐被废弃的原因就是,页面加载的viewstate过于庞大, ...

  7. Python 实现单例模式的一些思考

    一.问题:Python中如何实现单例模式 单例模式指一个类只能实例化一个对象. 二.解决方案: 所有资料参考于: http://python.jobbole.com/87294/ https://ww ...

  8. POJ - 3126 bfs + 素数筛法 [kuangbin带你飞]专题一

    题意:给定两个四位素数作为终点和起点,每次可以改变起点数的某一位,且改变后的数仍然是素数,问是否可能变换成终点数字? 思路:bfs搜索,每次改变四位数中的某一位.素数打表方便判断新生成的数是否是素数. ...

  9. AES对称加密

    import javax.crypto.Cipher; import javax.crypto.spec.IvParameterSpec; import javax.crypto.spec.Secre ...

  10. Servlet Cookie取不到值原因

    现象: 在测试带Cookie的HTTP请求时发现,服务端用request.getHeader("cookie")可以去到值; 但是用request.getCookies()却不行  ...