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. Partition Array

    Given an array nums of integers and an int k, partition the array (i.e move the elements in "nu ...

  2. Java字节码（.class文件）格式详解（一）

    原文链接:http://www.blogjava.net/DLevin/archive/2011/09/05/358033.html 小介:去年在读<深入解析JVM>的时候写的,记得当时还 ...

  3. CSS滤镜

    Filter属性介绍 Alpha滤镜的使用 Blur滤镜的使用 Filph.Filpv滤镜 DropShadow滤镜 Glow 滤镜 Gray ,Invert,Xray 滤镜 Shadow滤镜 19. ...

  4. SQLite使用教程9 Select 语句

    http://www.runoob.com/sqlite/sqlite-select.html SQLite Select 语句 SQLite 的 SELECT 语句用于从 SQLite 数据库表中获 ...

  5. hbase多用户入库，regionserver下线问题

    近期对hbase多用户插入数据时,regionserver会莫名奇妙的关闭,regionserver的日志有很多异常: 如下: org.apache.hadoop.hbase.DroppedSnaps ...

  6. 【iOS知识学习】_iOS动态改变TableView Cell高度

    在做tableView的时候,我们有时候须要依据cell的高度动态来调整.近期在网上看到一段代码不错.跟大家Share一下. 在 -(UITableViewCell *)tableView:(UITa ...

  7. PHP strlen() 函数

    定义和用法 strlen() 函数返回字符串的长度. 语法 strlen(string) 参数 描述 string 必需.规定要检查的字符串. 例子 <?php echo strlen(&quo ...

  8. android报错及解决1--Bitmap加载时,报bitmap size exceeds VM budget

    报错描述: 用Bitmap加载图片资源时,报错java.lang.OutOfMemoryError: bitmap size exceeds VM budget 原因分析: android系统限制,只 ...

  9. 怎样加入� android private libraries 中的包的源码

    先上图: 这里以加入� afinal_0.5.1_bin.jar 为例. 第一步:加入�jar包到libs里面,系统自己主动把jar载入到android private libraries中: 第二步 ...

  10. .NET下解析Json的方法

    .NET下几种常见的解析JSON方法 主要类 命名空间 限制 内建LINQ支持 DataContractJsonSerializer System.Runtime.Serialization.Json ...