<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/app.css" type="text/css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
</style>
</head>
<body>
<header>
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="logoImg">
<img src="images/logo.png">
</div>
</div>
<div class="col-xs-6 col-md-4"></div>
</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="index.html" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">首页</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">关于IKO<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">关于IKO</a></li>
<li><a href="#">IKO公司</a></li>
<li><a href="#">IKO历史</a></li>
<li><a href="#">IKO产品/应用</a></li>
<li><a href="#">公司网络/办事机构</a></li>
<li><a href="#">在线留言</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">IKO产品<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">滚针轴承系列</a></li>
<li><a href="#">直线轴承系列</a></li>
<li><a href="#">精密定位工作台系列</a></li>
<li><a href="#">运动方向搜索</a></li>
<li><a href="#">旋转、旋转+角度、直线运动</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">轴承规格<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">滚针轴承系列</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">新闻技术<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">公司新闻</a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#">行业新闻</a></li>
<li><a href="#">产品技术</a></li>
<li><a href="#">技术知识</a></li>
<li><a href="#">技术服务</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">资料下载<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">滚针轴承</a></li>
<li><a href="#">凸轮从动轴承</a></li>
<li><a href="#">滚子从动轴承</a></li>
<li><a href="#">交叉滚子轴承</a></li>
<li><a href="#">圆柱滚子轴承</a></li>
<li><a href="#">轴承内圈</a></li>
<li><a href="#">直线导轨轴承</a></li>
<li><a href="#">滚珠花键轴承</a></li>
<li><a href="#">交叉直线导轨轴承</a></li>
<li><a href="#">直线衬套轴承</a></li>
<li><a href="#">直线平面轴承</a></li>
<li><a href="#">直线导轨组件</a></li>
<li><a href="#">直线导轨滑组</a></li>
<li><a href="#">精密定位工作台</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">应用案列<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#">应用领域 </a>
<ul class="dropdown-menu">
<li>
<a href="#">电子</a>
<a href="">机床</a>
<a href="">工业</a>
<a href="">运输</a>
<a href="">精密</a>
<a href="">风电</a>
<a href="">航天</a>
<a href="">工程</a>
<a href="">海洋</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#">客户案例</a>
<ul class="dropdown-menu">
<li>
<a href="#">XX钢厂</a>
<a href="">XX化工</a>
<a href="">XX机床</a>
<a href="">XX汽车</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function(){
dropdownOpen();//调用
});
function dropdownOpen() {
var $dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {
$(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
}
</script>
</body>
</html>
主要是jq部分
