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 ...
随机推荐
- Python中的选择排序
选择排序 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理如下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大 ...
- React 页面间传值的个人总结
react 组件之间传值的方案有很多,下面是我个人经验的总结 props 来传递值 传值方式: 通过props 获取值 通过props 提供的func去修改值 优点: 不需要任何第三方的组件,纯rea ...
- MYSQL瓶颈
一般来说, 在使用的时候 性能从某个数值开始.突然大大下降,说明就到了瓶颈期. mysql 瓶颈有2种,一种是 cpu瓶颈 一种是 io瓶颈.cpu瓶颈多是由io引起. 而io可以通过 show ...
- Python 简单的输出
Python hw其实非常简单. 2 行代码 vi test.py [Python] 纯文本查看 复制代码 ? 1 2 #!/usr/bin/python print "Hello Worl ...
- Mysql主从原理
MySQL的Replication(英文为复制)是一个多MySQL数据库做主从同步的方案,特点是异步复制,广泛用在各种对mysql有更高性能.更高可靠性要求的场合.与之对应的是另一个同步技术是MySQ ...
- (hdu step 8.1.6)士兵队列训练问题(数据结构，简单模拟——第一次每2个去掉1个,第二次每3个去掉1个.知道队伍中的人数<=3，输出剩下的人 )
题目: 士兵队列训练问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- Android执行时ART载入类和方法的过程分析
在前一篇文章中.我们通过分析OAT文件的载入过程,认识了OAT文件的格式,当中包括了原始的DEX文件. 既然ART运行时运行的都是翻译DEX字节码后得到的本地机器指令了.为什么还须要在OAT文件里包括 ...
- 沉迷 Docker，无法自拔（在 Docker 中运行 MySQL）
记得之前做网站开发的时候,因为服务端用的 MySQL 数据库,为了方便调试以及隔离生产与开发环境,自己就在本地也安装了一个 MySQL 数据库.但是用着用着慢慢的也发现了一些不舒服的地方,比如常驻后台 ...
- （转）java内部类详解
本文转自http://www.cnblogs.com/dolphin0520/p/3811445.html,谢谢作者 说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能 ...
- navicat创建存储过程、触发器和使用游标
创建存储过程和触发器 1.建表 首先先建两张表(users表和number表),具体设计如下图: 2.存储过程 写一个存储过程,往users表中插入数据,创建过程如下: 代码如下: BEGIN #Ro ...