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. 通过dbcc page来查看表中的数据

    --1.先建表 CREATE TABLE test(idd INT NOT NULL,name VARCHAR(10) NULL) INSERT INTO TEST SELECT 1,'abcdefg ...

  2. js避免全局污染

    避免声明全局变量,以免发生冲突

  3. 【Stage3D学习笔记续】真正的3D世界（一）：透视矩阵

    如果各位看官跟着我的学习笔记一路看过来的话,一定会吐槽我的,这都是什么3D啊?从头到尾整个都是在使用GPU绘制一堆2D图像而已,的确,之前我们一直使用正交矩阵利用GPU加速来实现2D世界的展示,算不上 ...

  4. 关于NoSQL数据库你应该知道的10件事

    关系数据库模型已经流行了几十年了,但是一种新类型的数据库——被称为NoSQL,正在引起企业的注意.下面是关于它的优势和劣势的一个概述.二十多年以来,对数据库管理来说,关系数据库(RDBMS)模型一直是 ...

  5. CAS总结之Ticket篇

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. Codeforces Round #325 (Div. 2) B. Laurenty and Shop 前缀和

    B. Laurenty and Shop Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/586/p ...

  7. iOS开发——面试笔试精华（一）

    面试笔试精华(一) 1.        #import 跟#include.@class有什么区别?#import<> 跟 #import”"又什么区别? 1>  #imp ...

  8. 面试题总结之C/C++/MISC

    C C pointer,指向数据结构与指向char的指针有区别吗 它们正做+1运算时产生的位移不同 分配在堆的内存与分配在堆栈的内存有什么不同 分配在堆的内存要手动去释放 C structure,数据 ...

  9. 解决安装包在win7,win8系统下安装后运行没有管理员权限

    今天打包一个程序在客户机上安装运行:一直报没有管理员权限:客户机是win8系统:直接右键管理员身份运行则都可以:为了避免不让用户每次都这么麻烦:只有问哈群友和百度,终于找到解决方法: 第一步:项目属性 ...

  10. svn常用操作命令（不断更新中......）

      1.svn info显示本地或远程条目的信息.打印你的工作拷贝和URL的信息包括:路径.名称.URL.版本库的根.版本库的UUID.Revision.节点类型.最后修改作者.最后修改版本最后修改日 ...