<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">

<title>导航加入下拉菜单</title>

<link rel="stylesheet" href="css/bootstrap.css">

<script src="js/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>

</head>

<body>

    <ul class="nav nav-tabs">

        <li><a href="#">首页</a></li>

        <li><a href="#">首页</a></li>

        <li><a href="#">首页</a></li>

        <li><a href="#">首页</a></li>

        <li><a href="#">首页</a></li>

        <li class="dropdown">

            <a href="#" data-toggle="dropdown">更多&nbsp;<span class="caret"></span></a>

                <ul class="dropdown-menu">

                    <li><a href="#">超清</a></li>

                    <li><a href="#">超清</a></li>

                    <li><a href="#">超清</a></li>

                </ul>

        </li>

    </ul>

<body>

</html>

示例图：

bootstrap：导航下拉菜单的更多相关文章

  1. 纯CSS实现二级导航下拉菜单--css的简单应用

    思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...

  2. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  3. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  4. bootstrap多级下拉菜单

    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...

  5. bootstrap的下拉菜单组件与导航条

    前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...

  6. bootstrap悬停下拉菜单显示

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...

  7. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  8. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

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

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

随机推荐

  1. poj 3181 Dollar Dayz（完全背包）

    Dollar Dayz Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5419   Accepted: 2054 Descr ...

  2. HTTP协议---三次握手

    HTTP协议 关于协议 ​ 对于应用层开发人员,接触最多的网络协议通常都是传输层的TCP,为什么这么说,因为再往上的应用层协议,如:HTTP.HTTPS.POP3.SMTP.RPC.FTP.TELNE ...

  3. [转]分布式session的几种实现方式

    我们应当对产生的Session进行处理,通过粘性Session,Session复制或Session共享等方式保证用户的体验度. 以下我将说明5种Session处理策略,并分析其优劣性. 第一种:粘性s ...

  4. 2019-10-19-dotnet-给MatterMost订阅RSS博客

    title author date CreateTime categories dotnet 给MatterMost订阅RSS博客 lindexi 2019-10-19 08:12:36 +0800 ...

  5. Python--day38--多进程的方法属性总结

    多进程的方法属性:

  6. 关于Ping和Tracert命令原理详解

    本文只是总结了两个常用的网络命令的实现原理和一点使用经验说明.这些东西通常都分布在各种书籍或者文章中的,我勤快那么一点点,总结一下,再加上我的一点理解和使用经验,方便大家了解.这些也是很基础的东西,没 ...

  7. HDU 1828“Picture”（线段树+扫描线求矩形周长并）

    传送门 •参考资料 [1]:算法总结:[线段树+扫描线]&矩形覆盖求面积/周长问题(HDU 1542/HDU 1828) •题意 给你 n 个矩形,求矩形并的周长: •题解1(两次扫描线) 周 ...

  8. linux清理函数

    每个非试验性的模块也要求有一个清理函数, 它注销接口, 在模块被去除之前返回所有资 源给系统. 这个函数定义为: static void   exit cleanup_function(void) { ...

  9. QQ三方登录

    申请了十天,最终通过了审核,能够上线了,事实上申请的第一天,站点的qq登录已经做好了,而且能够用測试帐号登录,但提交审核后,总是通只是,提示:您的站点审核未通过.原因是"未放置QQ登录but ...

  10. Codeforces Beta Round #4 (Div. 2 Only) D. Mysterious Present（LIS）

    传送门 题意: 现在我们有 n 个信封,然后我们有一张卡片,并且我们知道这张卡片的长和宽. 现给出这 n 个信封的长和宽,我们想形成一个链,这条链的长度就是这条链中所含有的信封的数量: 但是需要满足① ...