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

运行效果截图如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
  6. <title>纯CSS菜单</title>
  7. <style type="text/css">
  8. * {font-family:"宋体";margin:;padding:;}
  9. body {padding:15px;}
  10. .nav li li a {display:inline-block;}
  11. .nav li li a {display:block;}
  12. .nav ul {list-style-type:none;margin:;padding:;}
  13. .nav ul li { float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:;padding:;margin:;width:120px;}
  14. .nav ul li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#;text-decoration:none;background:#f7f7f7;}
  15. .nav ul table {width:%;border-collapse:collapse;border:;padding:;margin:;}
  16. .nav ul li ul {display:none;}
  17. .nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {color:red;background-color:#f1f1f1;}
  18. .nav ul li:hover ul,.nav ul li a:hover ul,.nav ul li a:active ul {display:block;width:%;}
  19. .nav ul ul li {display:block;width:%;border:none;}
  20. .nav ul ul li a{display:block;color:blue;border:none;}
  21. </style>
  22. </head>
  23. <body>
  24. <div class="nav">
  25. <ul>
  26. <li><a href="#">首页
  27. <!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>
  28. <ul>
  29. <li><a href="#">最新更新</a></li>
  30. <li><a href="#">下载排行</a></li>
  31. </ul>
  32. </td></tr></table><!--[if lte IE ]></a><![endif]-->
  33. </li>
  34. <li><a href="#">ASP
  35. <!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>
  36. <ul>
  37. <li><a href="#">企业整站</a></li>
  38. <li><a href="#">图片相册</a></li>
  39. <li><a href="#">社区程序</a></li>
  40. </ul>
  41. </td></tr></table><!--[if lte IE ]></a><![endif]-->
  42. </li>
  43. <li><a href="#">PHP
  44. <!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>
  45. <ul>
  46. <li><a href="#">博客微博</a></li>
  47. <li><a href="#">论坛社区</a></li>
  48. </ul>
  49. </td></tr></table><!--[if lte IE ]></a><![endif]-->
  50. </li>
  51. <li><a href="#">JSP
  52. <!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>
  53. <ul>
  54. <li><a href="#">企业</a></li>
  55. <li><a href="#">新闻系统</a></li>
  56. <li><a href="#">留言</a></li>
  57. </ul>
  58. </td></tr></table><!--[if lte IE ]></a><![endif]-->
  59. </li>
  60. <li><a href="#">VC++
  61. <!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>
  62. <ul>
  63. <li><a href="#">数据库</a></li>
  64. <li><a href="#">界面</a></li>
  65. <li><a href="#">加密</a></li>
  66. </ul>
  67. </td></tr></table><!--[if lte IE ]></a><![endif]-->
  68. </li>
  69. <li><a href="#">DELPHI
  70. <!--[if IE ]><!--></a><!--<![endif]--><table cellpadding="" cellspacing=""><tr><td>
  71. <ul>
  72. <li><a href="#">系统相关</a></li>
  73. <li><a href="#">算法</a></li>
  74. <li><a href="#">数据库</a></li>
  75. </ul>
  76. </td></tr></table><!--[if lte IE ]></a><![endif]-->
  77. </li>
  78. </ul>
  79. </div>
  80. </body>
  81. </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. 正则去掉img标签的style样式

    $body = '<div style="width:100px; height:20px;"><img alt="test" src=&qu ...

  2. python学习笔记-（十二）scoket编程基础

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...

  3. 【09-03】java泛型学习笔记

    静态方法的泛型 /** * @description 静态方法的泛型无法使用类定义的泛型,因为类在实例化时才确定具体的泛型类,因此静态方法要使用泛型需要使用泛型方法的方式 */ public clas ...

  4. 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ItemSelector）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...

  5. 入门： 使用JNI 从C++代码中调用Java的静态方法

    开发环境: 操作系统: (uname -a output)  Linux ubuntu 3.8.0-19-generic #29-Ubuntu SMP Wed Apr 17 18:16:28 UTC ...

  6. Windows下memcached.exe的安装与配置

    D:\PHP\Memcached\memcached.exe -d install D:\PHP\Memcached\memcached.exe –m  1024  -d start 假设安装在:D: ...

  7. HMTL判断ie版本

    html判断IE版本 1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> ...

  8. ps批量处理图片

    刚刚有朋友问,ps咋做批量动作呢,其实特别简单,基本一劳永逸,用尺寸做个例子,大家看看就知道了.

  9. 如何使用Service的Context弹出Dialog对话框，即全局性对话框

    在dialog.show()语句前加入: dialog.getWindow().setType(WindowManager.LayoutParams.TYPE_SYSTEM_ALERT); 然后在An ...

  10. 动态页面 servlet

    1.常见软件架构. C/S: 客户端 服务器  安全性较好,但是升级需要升级两端   B/S: 浏览器 服务器  安全性较差, 但是升级时 只需要升级服务器端(我们今后就是开发这个架构的) 2.资源分 ...