html代码：

 <!DOCTYPE html>

 <html>

     <head>

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

         <title>Bootstrap导航条鼠标悬停下拉菜单</title>

     <link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">

     <script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>

     <script id="bootstrap_221" type="text/javascript" class="library" src="/js/sandbox/bootstrap-2.2.1/js/bootstrap.min.js"></script>

     </head>

     <body>

         <div class="container">

                 <div class="navbar">

         <div class="navbar-inner">

           <ul class="nav">

             <li class="dropdown"> <a href="#menu3">Menu3</a>

               <ul class="dropdown-menu">

                 <li><a href="#menu7">Menu7</a></li>

                                 <li><a href="#menu8">Menu8</a></li>

               </ul>

             </li>

             <li><a href="#">Menu4</a></li>

             <li><a href="#">Menu5</a></li>

             <li><a href="#">Menu6</a></li>

           </ul>

         </div>

       </div>

             </div>

     </body>

 </html>

css:

 .navbar .nav > li .dropdown-menu {

     margin:;

 }

 .navbar .nav > li:hover .dropdown-menu {

     display: block;

 }

效果：

参考：http://runjs.cn/detail/k4ahmcgc

【html】【13】特效篇--下拉导航的更多相关文章

  1. 一款jQuery立体感动态下拉导航菜单特效

    一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...

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

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

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

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

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

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

  5. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  6. 纯CSS实现二级下拉导航菜单

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

  7. Javascript下拉导航

    1.右侧导航 tree.js function Toggle(e){ if(!document.getElementById) return; if(!e) var e = window.event; ...

  8. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  9. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

随机推荐

  1. .NET通用基本权限系统

    DEMO下载地址: http://download.csdn.net/detail/shecixiong/5372895 一.开发技术:B/S(.NET C# ) 1.Windows XP以上 (支援 ...

  2. HDU 4628

    这是一个大水题啊... 因为比赛时不会算复杂度耽误半天. i从0到2^n枚举集合i的所有分割两半的情况的复杂度为O(3^n),可以想象这个过程相当于是给每个位标记0,1,2(0表示不选,1,2表示两个 ...

  3. jquery validation 简单验证手机号码

    js代码 // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var lengt ...

  4. Objective-C中的Block(闭包) （轉載）

    来源: 伯乐在线 - 青玉伏案 链接:http://ios.jobbole.com/83229/ 学习OC有接触到一个新词Block(个人感觉又是一个牛气冲天的词),但不是新的概念,不是新的东西.学过 ...

  5. svn 如何解决冲突

    项目中,往往不止你一人开发,多人开发,难免会有代码的冲突.彼此间谁也不能保证不会修改同个文件.如果修改了同个方法的内容.这时提交到svn是会提示代码冲突的. 当然,冲突是可控的,但不能避免.每次写代码 ...

  6. poj 2251 搜索

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13923   Accepted: 5424 D ...

  7. Redis实战之征服 Redis + Jedis + Spring （三）

    一开始以为Spring下操作哈希表,列表,真就是那么土.恍惚间发现“stringRedisTemplate.opsForList()”的强大,抓紧时间恶补下. 通过spring-data-redis完 ...

  8. JavaScript中的Partial Application和Currying

    这篇文章是一篇学习笔记,记录我在JS学习中的一个知识点及我对它的理解,知识点和技巧本身并不是我原创的.(引用或参考到的文章来源在文末) 先不解释Partial Application(偏函数应用)和C ...

  9. ThinkPHP 获取配置文件中的值

    C('SPECIAL_USER'):获取配置文件中的值 存入数组

  10. Linux下修改网卡IP、DNS和网关

    Linux下修改网卡IP和网关 建议通过终端字符方式下来修改 一.修改IP地址 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 BOO ...