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 ...
随机推荐
- 使用anyproxy 来抓取手机的数据包
简单介绍Anyproxy Anyproxy 是alibaba 前端团队开源的http/https 的代理工具 官网地址:http://anyproxy.io/cn/ 环境要求:需要安装nodejs 提 ...
- pdo 封装增删改查类
<?php/** * Class model * @package Core\lib */class model{ protected $pdo = null; // 连接数据库 ...
- NOIP2012junior—P1—质因数分解
NOIP2012junior-P1-质因数分解 时间: 1000ms / 空间: 131072KB [背景] NOIP2012[描述] 已知正整数n 是两个不同的质数的乘积,试求出较大的那个质数. [ ...
- C++雾中风景4：多态引出的困惑，对象的拷贝？
C++作为一门面向对象的语言,自然具备了面向对象的三大特征:封装,继承,多态.在学习多态性质的过程中,发现了C++与其他语言很大的区别(坑?).在C++中的=操作符的使用与C++呈现的内存模型似乎并不 ...
- Bzoj 4950
Description 那是春日里一个天气晴朗的好日子,你准备去见见你的老朋友Patrick,也是你之前的犯罪同伙.Patrick在编程竞赛上豪赌输掉了一大笔钱,所以他需要再干一票.为此他需要你的帮助 ...
- NGUI_Input
九.输入框Input 1.凡是用户可以输入文本的地方,几乎都用输入框,有登录账号和密码.输入角色名称.输入聊天内容 2.手动拼接输入框,拖动预制体的就不再说了 (1).创建一个Sprite作为输入框的 ...
- spring的aop详解
一.aop术语 1.连接点joinpoint: 程序执行的某个特定位置:如类开始初始化之前.类初始化之后.类某个方法调用前.调用后等.Spring仅支持方法的连接点,即仅能在方法调用前.方法调用后以及 ...
- 直接编译caffe出现的两个问题
工控机的环境之前已经配置好ubuntu14.04+CUDA7.5+cuDNN v4,再加opencv3.1.要用ResNet做分类,需要重新编译一个caffe框架.下载BVLC/caffe,接着修改M ...
- JSONArray - JSONObject - 遍历 \ 判断object空否
public static void main(String[] args) { String str = "[{name:'a',value:'aa'},{name:'b',value:' ...
- SSI学习（二）
1.SSI指令 #config:指定返回到client浏览器的错误消息.日期和文件大小所使用的格式. #echo:在 HTML 页中插入环境变量的值. #exec:执行一个应用程序或一条 shell ...