用bootstrap实现导航功能

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container">
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="#">旅游网</a>
   </div>

   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav" >
    <li ><a href="#">主页<span class="sr-only">(current)</span></a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">国外<span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
     <li><a href="#huangshigongyuan ">黄石公园</a></li>
     <li><a href="#dabenzhong">大本钟</a></li>
     <li><a href="#aifeier">埃菲尔</a></li>
     <li class="divider"></li>
     <li><a href="#">更多..</a></li>
    </ul>
    </li>
    <li data-toggle="modal" data-target="#about"><a href="#" >关于</a></li>
   </ul>

 
 
   <ul class="nav navbar-nav navbar-right">
    <li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button"><a href="#" >登陆</a></li>
    <li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button"><a href="#" >注册</a></li>
   </ul>
   </div>
  </div>
  </nav>

演示地址：http://www.jscssshare.com/#/sample/RcQr1aNu