如何使我的导航栏移动响应下降 - how to make my nav bar mobile responsive to drop down

我把它作为导航栏，我希望它能在移动设备上响应，这样在小屏幕上它就变成了一个下拉菜单。像这样的东西。

菜单
主页
+PORFOLIO
-婚礼-爱
关于
+博客
-故事
-存档
联系

任何帮助都会很好，因为我没有运气独自解决这个问题。。。

img{
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}
/*navbar*/
#wrap{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 13px;
	font-weight: normal;
	padding-right: 48px;
	padding-bottom: 30px;
	padding-top: 50px;
	
}
.navbar li a{
	display: block;
}
.navbar li{
	display: inline-block;
	list-style: none;
	text-align: left;
	
}
.navbar a{
	text-decoration: none;
	color: #9c9c9c;
	display: block;
	padding: 8px;
	background-color: white;
}
.navbar li ul{
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	height: auto;
	
}
.navbar li:hover, a:hover{
	color: black;
}
.navbar li:hover ul{
	display: block;
}	
.navbar li ul li{
	display: block;
}
p{
	font-size: 13px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 30px;
	padding-top: 30px;
	font-family: "Lora" serif;
	color: black;
	font-weight: 200;
	text-decoration: none;
}
footer{
	text-align: center;
	font-family: "Lora" serif;
	font-size: 10px;
	font-weight: normal;
	padding-bottom: 30px;
	padding-top: 30px;
}

<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Instagram.css">
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<style type="text/css">
	
a p:hover{
	text-decoration: none;
}
		
    
    </style>
</head>
<body>
	    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
	            
	            <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
	        
	        </div>
	        <div class="clearfix visible-xs-block"></div>
	        <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
	        
	       	        
            <div class="col-xs-12 col-sm-12 col-md-12">
	            
	            
			<div id="wrap">
			<ul class="navbar">
	
		  <li><a href="index.html">HOME</a></li> 
		 <li><a href="">PORTFOLIO</a>
			<ul>
			   <li><a href="wedding.html">WEDDING</a></li>
			   <li><a href="Love.html">LOVE</a></li>
			   
			</ul>         
		 </li>
		 <li><a href="#">ABOUT</a>
			<ul>
			   <li><a href="AboutUs.html">US</a></li>
			</ul>         
		 </li>
		 <li><a href="#">BLOG</a>
		 	<ul>
			 	<li><a href="NewBlogPage3.html">STORIES</a></li>
			 	<li><a href="Archive.html">ARCHIVE</a></li>
		 	</ul>
		 </li>		  		
		 <li><a href="Contact.html">CONTACT</a></li>
	  </ul>			
  	</div>			
	      
            </div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
 <div class="col-xs-12 col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
            
           
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
</body>
</html>

我试着让它为您工作。我已经删除了你自己的导航栏和css，并添加了一个bootstrap 3响应导航栏。在一个自定义css中，我包含了你自己的风格+对引导程序导航栏的一些调整。在html文件中，我还添加了bootstrap css&js和Jquery。

HTML

 <html>
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Bootstrap 3 - Hamburger menu</title>
    <!-- Bootstrap Core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/custom.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="Instagram.css">
    <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
    <style type="text/css">
    a p:hover{
        text-decoration: none;
    }
    </style>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <img src="Images/NewLogoBlack.png" class="img-responsive" width="250px" height="250px">
            </div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>

<div class="col-xs-12 col-sm-12 col-md-12">

<div id="wrap">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 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" 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>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="index.html">HOME</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PORTFOLIO<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="Wedding.html">WEDDING</a></li>
            <li><a href="Love.html">LOVE</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="AboutUs.html">US</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">BLOG<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="NewBlogPage3.html">STORIES</a></li>
             <li><a href="Archive.html">ARCHIVE</a></li>
          </ul>
        </li>
        <li><a href="Contact.html">CONTACT</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>          
</div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>
 <div class="col-xs-12 col-sm-12 col-md-12"><footer>All images Copyright © Seaward Photography 2016. Based in San Diego, California. Available for destinations worldwide.</footer></div>
            <div class="clearfix visible-xs-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="clearfix visible-md-block"></div>

        </div>
    </div>


<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.js"></script>
<script>

</script>
</body>
</html>

CSS

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#wrap{
    font-family: "Lora" serif;
    font-size: 13px;
    font-weight: normal;
    padding-right: 48px;
    padding-bottom: 30px;
    padding-top: 50px;
}
p{
    font-size: 13px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
    padding-top: 30px;
    font-family: "Lora" serif;
    color: black;
    font-weight: 200;
    text-decoration: none;
}

footer{
    text-align: center;
    font-family: "Lora" serif;
    font-size: 10px;
    font-weight: normal;
    padding-bottom: 30px;
    padding-top: 30px;
}
/* BOOTSTRAP TWEAKS */
.navbar-default {
background: none;
border: none;
}

.navbar-default .navbar-nav li a {
    color: #9c9c9c;
}
.caret {
    border-top-color: #9c9c9c;
border-bottom-color: #9c9c9c;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar .navbar-collapse {
  text-align: center;
  }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: black;
    text-decoration: underline #9c9c9c;
    background: none; 
    }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    color: #555555;
    background: none;
    }
.dropdown-menu {
    list-style: none;
    background: none;
    border: none;
    -webkit-box-shadow:none;
    box-shadow: none;
}