<!DOCTYPE html>
<html lang="zh-CN"><style type="text/css">.navbar-nav .dropdown-menu-width{ min-width: 100px; background-color: black; color: white;}.navbar-nav .dropdown-menu-width>li>a{ color: white;}.navbar-nav .dropdown-menu-width>li>a:hover{ color: red;}/*.nav > li:hover .dropdown-menu {display: block;}*/.navbar-nav .dropdown-menu-width:after { position: absolute; width: 0; height: 0; top: -16px; left: 45%; border: 6px rgba(0, 0, 0, 0) solid; content: " "; z-index: 1; border-bottom-color: black;}</style><head>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>导航菜单</title> <link href="css/bootstrap.min.css" rel="stylesheet" /></head><body>
<div class="navbar navbar-fixed-top navbar-default" > <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img src="img/logo.png" class="img-responsive" style="height: 40px; margin-top: -10px;"></a> <a class="navbar-toggle" data-toggle="collapse" href="#collapse2"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> </div> <div class="navbar-collapse collapse hidden-xs" id="collapse"> <ul class="nav navbar-nav"> <li><a href="#" data-toggle="tab">首页</a></li> <li class="active"><a href="#" data-toggle="tab">新闻</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">产品大全 <span class="caret"></span> </a> <ul class="dropdown-menu-width dropdown-menu "> <li><a href="#" data-toggle="tab">产品1</a></li> <li><a href="#" data-toggle="tab">产品2</a></li> <li class="divider"></li> <li><a href="#" data-toggle="tab">产品3</a></li> </ul> </li> </ul> <a href="#" class="navbar-link navbar-text navbar-right">右侧文字内容</a> </div> <div class="navbar-collapse collapse" id="collapse2"> <ul class="nav navbar-nav hidden-lg"> <li><a href="#" data-toggle="tab">首页</a></li> <li class="active"><a href="#" data-toggle="tab">新闻</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">产品大全22 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#" data-toggle="tab">产品1</a></li> <li><a href="#" data-toggle="tab">产品2</a></li> <li class="divider"></li> <li><a href="#" data-toggle="tab">产品3</a></li> </ul> </li> </ul></div>
</div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script></body></html>