bootstrap 导航栏鼠标悬停显示下拉菜单
在jsp中加入一下代码：
.navbar .nav > li:hover .dropdown-menu {
display: block;
}
全部代码如下所示：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>创新实验学院</title>
<link rel='stylesheet' id='bootstrap-css' href='./css/bootstrap.min.css' type='text/css' rel="stylesheet" />
<link rel='stylesheet' id='fontawesome-css' href='./css/ui/font-awesome/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='flexslider-css' href='./css/ui/flexslider/flexslider.css' type='text/css' media='all' />
<link rel='stylesheet' id='zan-css' href='./css/ui/css/zan.css' type='text/css' rel="stylesheet" />
<link rel='stylesheet' id='custom-css' href='./css/ui/css/custom.css' type='text/css' media='all' />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" language="javascript" src="./js/bootstrap.min.js"></script>
<style type="text/css">
.fontsize
{
font-size:13px;
color:#fff;
}
.navbar-nav>li>a{
padding-top:5px;
padding-bottom:5px;
padding-left: 10px;
padding-right: 10px;
}
.navbar .nav > li:hover .dropdown-menu {
display: block;
}
.navbar.navbar-inverse{
min-height:40px;
maigin-bottom:10px;
}
.nav.navbar-nav
{
padding-top:5px;
min-height:40px;
}
.container.clearfix {
margin-right: auto;
margin-left: auto;
padding-left: 2px;
padding-right: 2px;
height:40px
}
</style>
</head>
<body style="margin:0">
<div class="header">
<a href="http://www.baidu.com" class="logo" data-toggle="animation"></a>
</div>
<div class="navbar navbar-inverse" style="border-radius:0px;background-image:url(./images/navbg.gif)" >
<div class="container clearfix">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">下拉框</span>
<span class="fa fa-reorder fa-lg"></span>
</button>
</div>
<nav class="navbar-collapse collapse" style="background-image:url(./images/navbg.gif)">
<ul class="nav navbar-nav">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style="margin-right:10px"><a href="http://zanwp.com/zanblog3" class="fontsize"><i class="fa fa-home"></i> 首页</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" style="margin-right:10px"><a class="fontsize"><i class="fa fa-support"></i> 学院概况</a>
<ul class="dropdown-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">简介</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">沿革</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">学院领导</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">服务指南</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" style="margin-right:10px"><a class="fontsize"><i class="fa fa-support"></i> 创新实践班</a>
<ul class="dropdown-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">机电实践班</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">软件工程实践班</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">媒体技术实践班</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">数学建模实践班</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">创业教育实践班</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">创造发明实践班</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">人形机器人实践班</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" style="margin-right:10px"><a class="fontsize"><i class="fa fa-support"></i>创新创业团队</a>
<ul class="dropdown-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">拜仁</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">门兴</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">多特</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">沙尔克</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style="margin-right:10px"><a href="http://www.baidu.com" class="fontsize"><i class="fa fa-home"></i>创业孵化园</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style="margin-right:10px"><a href="http://www.baidu.com" class="fontsize"><i class="fa fa-home"></i>创新创业资讯</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style="margin-right:10px"><a href="http://www.baidu.com" class="fontsize"><i class="fa fa-home"></i>教学管理</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style="margin-right:10px"><a href="http://www.baidu.com" class="fontsize"><i class="fa fa-home"></i>党群工作</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children" style="margin-right:10px"><a class="fontsize"><i class="fa fa-support"></i>招生招聘</a>
<ul class="dropdown-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">招生</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-post"><a href="#" class="fontsize">招聘</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-215" style="margin-right:10px"><a href="http://www.baidu.com" class="fontsize"><i class="fa fa-home"></i>文件下载</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
bootstrap 导航栏鼠标悬停显示下拉菜单的更多相关文章
- Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- lightinthebox头部分类菜单下拉导航，使鼠标移到See All Categories就显示下拉菜单
lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...
- bootstrap 响应式导航条模板（含下拉菜单，弹出框）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap系列 -- 36. 向上弹起的下拉菜单
有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出.在Bootstrap框架中专门为这种效果提代了一个类名“dropu ...
- css实现hover显示下拉菜单
原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...
- Bootstrap页面布局15 - BS带下拉菜单的按钮
带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' cla ...
- JQueryEasyUI easyui-combobox 单击文本区域显示下拉菜单
//单击内容框弹出下拉菜单 $(".combo").click(function (e) { if (e.target.className == 'combo-text valid ...
- js 导航栏多项点击显示下拉菜单代码
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
随机推荐
- CentOS6.5 下Nginx 的安装与配置
昨天买了个服务器最近在配置一些基础环境,想在访问www.wzpbk.com:8080 不想要后面的:8080就能直接访问到,听说了Nginx就研究下给服务器装上传说中大名鼎鼎 Nginx 他能反向代 ...
- C#在自定义事件里传递自定义数据,使用EventArgs的姿势
EventArgs是包含事件数据的类的基类,用于传递事件的细节.今天分享的是使用泛型来约束EventArgs,在事件里传递自定义数据的例子. 正题 由于这个关注点很小,直接上代码了. 定义泛型类TEv ...
- 50个php程序性能优化集锦
1. 用单引号代替双引号来包含字符串,这样做会更快一些.因为 PHP 会在双引号包围的 字符串中搜寻变量,单引号则不会,注意:只有 echo 能这么做,它是一种可以把多个字符 串当作参数的" ...
- SQL面试题：有A B C三列,用SQL语句实现：当A列大于B列时选择A列否则选择B列
.请教一个面试中遇到的SQL语句的查询问题 表中有A B C三列,用SQL语句实现:当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列. ------------------- ...
- 学习用java基于webMagic+selenium+phantomjs实现爬虫Demo爬取淘宝搜索页面
由于业务需要,老大要我研究一下爬虫. 团队的技术栈以java为主,并且我的主语言是Java,研究时间不到一周.基于以上原因固放弃python,选择java为语言来进行开发.等之后有时间再尝试pytho ...
- C语言递归实现二叉树（二叉链表）的三种遍历和销毁操作（实验）
今天写的是二叉树操作的实验,这个实验有三个部分: ①建立二叉树,采用二叉链表结构 ②先序.中序.后续遍历二叉树,输出节点值 ③销毁二叉树 二叉树的节点结构定义 typedef struct BiTNo ...
- 巧用第三方高速开发Android App 热门第三方SDK及框架
巧用第三方高速开发Android App 热门第三方SDK及框架 历经大半年的时间,最终是把这门课程给录制出来了,也就在今天,正式在慕课网上上线了 项目地址:巧用第三方高速开发Android App ...
- 【ASP.NET】DataTable序列化
问题描述 主要解决DataTable数据转化为JSON,从Controller传递数据给View的问题. 1 内容区 提供如下方法,仅供参考 public static class ObjectE ...
- 两款主流项目管理软件PK，哪个更好用？
两款主流项目管理软件PK,哪个更好用? 一.产品介绍 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领 ...
- springmvc返回json字符串中文乱码问题
问题: 后台代码如下: @RequestMapping("menuTreeAjax") @ResponseBody /** * 根据parentMenuId获取菜单的树结构 * @ ...