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 ...
随机推荐
- JavaScript--我发现，原来你是这样的JS：函数表达式和闭包
一.介绍 本次博客主要介绍函数表达式的内容,主要是闭包. 二.函数表达式 定义函数的两种方式:一个是函数声明,另一个就是函数表达式. //1.函数声明写法 function fn2(){ consol ...
- Js中for循环的阻塞机制
Js阻塞机制,跟Js引擎的单线程处理方式有关,每个window一个JS线程.所谓单线程,在某个特定的时刻只有特定的代码能够被执行,并阻塞其它的代码. 由于浏览器是事件驱动的(Event driven) ...
- extr_shopping
__author__ = 'ZZG' # noinspection PyCallingNonCallable shopping_list =[ ("iphone",5300), ( ...
- day2-Python基本数据类型介绍
百度云连接 链接:https://pan.baidu.com/s/1hsGQx7m 密码:u07q
- 【docker 一】入门实践、环境部署、基本操作指令、镜像库、数据卷
简述 `docker是如火如荼的容器技术,今后会陆续上传关于微服务技术的学习笔记,希望能和大家一起学习一起分享!` docker环境搭建 1.获取最新版的Docker安装包 $ wget -qO- h ...
- Linux多线程编程——线程的同步
POSIX信号量 posix信号量不同于IPC中的信号量 常用的posix信号量函数 #include <semaphore.h> int sem_init(sem_t* sem,i ...
- java学习笔记之System类
System类常用总结 System类概述 java.lang.System类,系统属性信息工具类 常用静态方法: 1. public static long currentTimeMillis() ...
- Java进阶（七）正确理解Thread Local的原理与适用场景
原创文章,始自发作者个人博客,转载请务必将下面这段话置于文章开头处(保留超链接). 本文转发自技术世界,原文链接 http://www.jasongj.com/java/threadlocal/ Th ...
- 更便捷的css处理方式-postcss
更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲.我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下 ...
- 》》vue
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...