<!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">關(guān)于IKO<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">關(guān)于IKO</a></li>
<li><a href="#">IKO公司</a></li>
<li><a href="#">IKO歷史</a></li>
<li><a href="#">IKO產(chǎn)品/應(yīng)用</a></li>
<li><a href="#">公司網(wǎng)絡(luò)/辦事機構(gòu)</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產(chǎn)品<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="#">旋轉(zhuǎn)、旋轉(zhuǎn)+角度废离、直線運動</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">軸承規(guī)格<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">新聞技術(shù)<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">公司新聞</a></li>
<li><a href="#">行業(yè)新聞</a></li>
<li><a href="#">行業(yè)新聞</a></li>
<li><a href="#">產(chǎn)品技術(shù)</a></li>
<li><a href="#">技術(shù)知識</a></li>
<li><a href="#">技術(shù)服務(wù)</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="#">軸承內(nèi)圈</a></li>
<li><a href="#">直線導(dǎo)軌軸承</a></li>
<li><a href="#">滾珠花鍵軸承</a></li>
<li><a href="#">交叉直線導(dǎo)軌軸承</a></li>
<li><a href="#">直線襯套軸承</a></li>
<li><a href="#">直線平面軸承</a></li>
<li><a href="#">直線導(dǎo)軌組件</a></li>
<li><a href="#">直線導(dǎo)軌滑組</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">應(yīng)用案列<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#">應(yīng)用領(lǐng)域 </a>
<ul class="dropdown-menu">
<li>
<a href="#">電子</a>
<a href="">機床</a>
<a href="">工業(yè)</a>
<a href="">運輸</a>
<a href="">精密</a>
<a href="">風(fēng)電</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();//調(diào)用
});
function dropdownOpen() {
var $dropdownLi = $('li.dropdown');
$dropdownLi.mouseover(function() {
$(this).addClass('open');
}).mouseout(function() {
$(this).removeClass('open');
});
}
</script>
</body>
</html>
主要是jq部分
