这是一款纯CSS菜单，二级下拉导航效果，是最简洁的CSS导航菜单，兼容性也很棒，IE7/8、火狐等都支持，而且它还是学习CSS菜单编写的典型教程，让你学会很多CSS技巧。

运行效果截图如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

<title>纯CSS菜单</title>

<style type="text/css">

* {font-family:"宋体";margin:;padding:;}

body {padding:15px;}

.nav li li a {display:inline-block;}

.nav li li a {display:block;}

.nav ul {list-style-type:none;margin:;padding:;}

.nav ul li { float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:;padding:;margin:;width:120px;}

.nav ul li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#;text-decoration:none;background:#f7f7f7;}

.nav ul table {width:%;border-collapse:collapse;border:;padding:;margin:;}

.nav ul li ul {display:none;}

.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {color:red;background-color:#f1f1f1;}

.nav ul li:hover ul,.nav ul li a:hover ul,.nav ul li a:active ul {display:block;width:%;}

.nav ul ul li {display:block;width:%;border:none;}

.nav ul ul li a{display:block;color:blue;border:none;}

</style>

</head>

<body>

<div class="nav">

<ul>

<li><a href="#">首页

<!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>

<ul>

<li><a href="#">最新更新</a></li>

<li><a href="#">下载排行</a></li>

</ul>

</td></tr></table><!--[if lte IE ]></a><![endif]-->

</li>

<li><a href="#">ASP

<!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>

<ul>

<li><a href="#">企业整站</a></li>

<li><a href="#">图片相册</a></li>

<li><a href="#">社区程序</a></li>

</ul>

</td></tr></table><!--[if lte IE ]></a><![endif]-->

</li>

<li><a href="#">PHP

<!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>

<ul>

<li><a href="#">博客微博</a></li>

<li><a href="#">论坛社区</a></li>

</ul>

</td></tr></table><!--[if lte IE ]></a><![endif]-->

</li>

<li><a href="#">JSP

<!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>

<ul>

<li><a href="#">企业</a></li>

<li><a href="#">新闻系统</a></li>

<li><a href="#">留言</a></li>

</ul>

</td></tr></table><!--[if lte IE ]></a><![endif]-->

</li>

<li><a href="#">VC++

<!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>

<ul>

<li><a href="#">数据库</a></li>

<li><a href="#">界面</a></li>

<li><a href="#">加密</a></li>

</ul>

</td></tr></table><!--[if lte IE ]></a><![endif]-->

</li>

<li><a href="#">DELPHI

<!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>

<ul>

<li><a href="#">系统相关</a></li>

<li><a href="#">算法</a></li>

<li><a href="#">数据库</a></li>

</ul>

</td></tr></table><!--[if lte IE ]></a><![endif]-->

</li>

</ul>

</div>

</body>

</html>

纯CSS实现二级下拉导航菜单的更多相关文章

  1. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  2. 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  3. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  4. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  5. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  6. Web前端开发实战1：二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  7. Web前端开发实战2：二级下拉式菜单之JS实现

    上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...

  8. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  9. MDNavBarView下拉导航菜单（仿美团导航下拉菜单）

    说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...

随机推荐

  1. 如丝般顺滑地从Windows迁移SQLServer数据库到Linux

    老鸟看过菜鸟的上一篇<MSSQL On Linux备份与还原>文章后,很满意,但是还是忍不住发问:"这篇文章讲的是MSSQL在Linux系统上的备份与还原,如果我之前是Windo ...

  2. 图解JAVA对象的创建过程

    前面几篇博文分别介绍了JAVA的Class文件格式.JVM的类加载机制和JVM的内存模型,这里就索性把java对象的创建过程一并说完,这样java对象的整个创建过程就基本上说明白了(当然你要有基础才能 ...

  3. linux REDHAT6.4下安装ArcGIS Server 10.1

    1 安装环境 因为Linux的发行版本比较多,我们在使用的时候请严格按照官网给的给出的版本,在官网上给出的是经过严格测试的,如果采用其他的,即便安装上了,在后续的运作中出现问题,这个可就麻烦了,官网对 ...

  4. 浅谈Android中Activity的生命周期

    引言 我想对于Android开发人员来说,Activity是再熟悉不过了,今天我们就来探讨下Activity的生命周期.熟悉的掌握Activity对于开发健壮的Android应用程序来说至关重要.下面 ...

  5. [Nhibernate]一级缓存

    目录 写在前面 文档与系列文章 一级缓存 一个例子 一级缓存管理 总结 写在前面 上篇文章介绍了nhibernate中对象的三种状态,通过对象的三种状态,很容易想到缓存. 什麽是缓存? 有时候,某些数 ...

  6. js中join和split的用法

  7. visio二次开发——图纸解析

    (转发请注明来源:http://www.cnblogs.com/EminemJK/) visio二次开发的案例或者教程,国内真的非常少,这个项目也是花了不少时间来研究visio的相关知识,困难之所以难 ...

  8. [译]ES6新特性:八进制和二进制整数字面量

    原文:http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binar ...

  9. VTK初学一，动画加AVI录制终于做出来了

      #ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRe ...

  10. C#深入浅出 继承（六）

    这个标题写出来好长时间了,都没写内容,今天无论如何都得写完它,昨天写了一段,尼玛,电脑突然死机,重启之后啥都没了. 继承嘛,有人觉得很简单,但是里面还是有内容可以讲的,因为面向对象也就这么点内容,封装 ...