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. 转载 SharePoint 2013配置Master Page and Page Layout

    转载原地址: http://www.cnblogs.com/huangjianwu/p/4539706.html 涉及到的内容是关于SharePoint 2013如何部署自定义的母版页和布局页. 进入 ...

  2. oracle 修改用户下部分表现有表空间

    工作日记之<修改用户表现有表空间> //user_tables可查询出当前登录用户的所有表,以及部分表信息,可以灵活运用于其他用途 //假设现有表空间TS1.TS2,需要迁移所有表空间TS ...

  3. Spring Data JAP 多个不是必填的查询条件处理

    简单的介绍一下使用场景,DAO层用Spring Data实现,dao 只有接口,实现类是容器启动时动态字节码生成,接口里定义方法,方法上@Query 里写JPQL查询语句. 基于以上的限制,如果对一个 ...

  4. 如何创建一个有System用户权限的命令行

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何创建一个有System用户权限的命令行.

  5. 自己写一个与startWith类似的判断方法

    package com.hanqi.lianxi; import java.util.Scanner; public class startWith {        //自己顶一个与startWit ...

  6. java基础三种循环的使用及区别

    摘要:Java新人初学时自己的一些理解,大神们路过勿喷,有什么说的不对不足的地方希望能给予指点指点,如果觉得可以的话,希望可以点一个赞,嘿嘿,在这里先谢了.在这里我主要说的是初学时用到的Java三个循 ...

  7. WinForm开发中针对TreeView控件改变当前选择节点的字体与颜色

    本文转载:http://www.cnblogs.com/umplatform/archive/2012/08/29/2660240.html 在B/S开发中,对TreeView控件要改变当前选中节点的 ...

  8. 7za 解压文件

    7za.exe x -aoa 完美国际补丁.7z 7za.exe x -aoa 完美国际补丁.7z -o"C:\Users\Admin\AppData\Local\Temp\完美国际补丁&q ...

  9. HIDKomponente使用读写Hid设备一瞥

    HIDKomponente 是delphi中使用的第三方Hid控件库,可以检测.控制连接到电脑的Hid设备.一般情况下多为usb设备.HIDKomponente的使用实际上很简单,只是因为第一次使用, ...

  10. [Effective C++ --008]别让异常逃离析构函数

    这章非常容易理解:因为C++并不禁止析构函数吐出异常,只是不鼓励这样做而已. 一.原因 假设我们有10个装着鸡蛋的容器,而且现在我们还想着把它在析构函数打烂. class Egg { public : ...