zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    php生成二维码的几种方式
    CVPR 2013
    面试&笔试---c语言之字符串处理
    逆向知识-汇编寻址方式汇总
    tensorflow中的lstm的state
    图文相关性 flickr数据实验结论_1
    LightGBM中GBDT的实现
    Tensorflow 变量的共享
    Tensorflow 变量的共享
    https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/
  • 原文地址:https://www.cnblogs.com/earendil/p/4198503.html
Copyright © 2011-2022 走看看