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. SQL Server 2008数据库创建，备份，还原图解及注意点

    一.新建数据库 步骤1:点击“新建数据库”. 步骤2:输入数据库名称,设置数据库文件保存位置(注意点:最好自己设置数据库文件保存位置,不要采用安装时默认的文件保存位置!),点击“确认”即可完成新库的创 ...

  2. CSS构造模型

    div 边距 边框 定位 浮动 21.1 div 部分(division)---<div>元素,经常以div形式引用---是XHTML元素,用于定义XHTML文件中的区域. 1.添加div ...

  3. 查看mysql的注册表路径

    原文地址:http://www.cppblog.com/lanshengsheng/archive/2012/11/23/195592.html

  4. GPS两点的距离

    目前手头的一个项目要用到GPS地理定位信息,很自然的就需要知道两个地点之间的距离,于是上网找了一下,同样自然的就有一些算法贴出来..(网络真是帮了大忙,省得我再去翻几何书自己研究算法了!公式早都忘光了 ...

  5. SAP ABAP 处理字符串串串串串串串串（详细）

    关于ABAP中处理字符串的方法,非常详细,学习过程中总结一下分享给大家,,, ABAP/4 提供多个处理类型 C 即字符串 的数据对象的关键字. 处理字符串 的方法有: 1.拆分字符串split 2. ...

  6. 解决MySQL连接超时Communications link failure due to underlying exception

    最近在用一个MySQL的Java连接池的过程中,连接一晚上不释放,第二天就会造成超时的错误,查了一下原因,原来是因为MySQL默认的空闲等待时间是8个小时,一旦空闲超过8个小时,就会抛出异常.异常文本 ...

  7. MFC——从实现角度分析微云界面

    在云计算时代之风吹来,很多互联网公司都在建云,提出云盘.云储存.云平台.云空间等等,骤然间,天下皆云.云是啥?有用户量,就有云,没有用户量,你的系统,你的云,也就是一朵白云. 最近研究了下微云的界面, ...

  8. hdu4081 次小生成树变形

    pid=4081">http://acm.hdu.edu.cn/showproblem.php?pid=4081 Problem Description During the Warr ...

  9. iOS 手动打造JSON Model转换库

    前一段时间学习了Runtime,对类和对象的结构,和一些消息转发有一些自己的理解,现在希望简单的应用下,就决定自己写一个简单的JSON与Model的相互转化,现在总结下. 建议查看 参考资料 :Run ...

  10. web前端开发前景怎么样？

    对于web前端开发,对现今前端的发展,中国的发展还很落后,中国没有Jquery,没有Node.js,其中最主要的一点是,中国的前端比较封锁,大家都没有分享的觉悟.回头看看,那些发展比较快的行业.软件, ...