出于某种原因，一旦我折叠了导航栏，一切看起来都很好但是当我按下打开的菜单按钮时，菜单似乎没有出现。它所做的只是闪现白，然后又闪回红色。怎么解决这个问题？
代码
<!DOCTYPE html>
<html>
<head>
<title>Propel WD</title>
<link rel="shortcut icon" href="/Users/Ryan/Downloads/LAPTOP3.JPG">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
.opacityChange {
position: relative;
-webkit-animation: myfirst 1s linear 0s 1 alternate;
animation: myfirst 1s linear 0s 1 alternate;
}
@-webkit-keyframes myfirst {
0% {opacity: 0.0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity: 0.75;}
100% {opacity: 1.0;}
}
@keyframes myfirst {
0% {opacity: 0.0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity: 0.75;}
100% {opacity: 1.0;}
}
hr {
height: 0.1px;
background-color: gainsboro;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" class="text-center" style="margin: 40px; font-family: Lato;" data-toggle="navbar-collapse">
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #F44336; border-bottom: none;">
<div class="container">
<div class="navbar-header" style="color: white;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#myPage"><div style="color: white; font-size: 16px;">Propel WD <span class="glyphicon glyphicon-circle-arrow-up"></span></div></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="file://localhost/Applications/propelOMS%3EHome.html"><div style="color: white; font-size: 13px;"><span class="glyphicon glyphicon-home"></span></div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EAbout.html"><div style="color: white; font-size: 13px;">ABOUT</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EServices.html"><div style="color: white; font-size: 13px;">SERVICES</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EPricing.html"><div style="color: white; font-size: 13px;">PRICING</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3EOI.html"><div style="color: white; font-size: 13px;">QUESTIONS</div></a></li>
<li class="active"><a href="#"><div style="color: white; font-size: 13px;">CONTACT</div></a></li>
<li><a href="file://localhost/Applications/propelOMS%3ETC.html" onclick="window.open('file://localhost/Applications/propelOMS%3ETC.html', 'newwindow', 'width=400, height='); return false;"><div style="color: white; font-size: 13px;">TERMS</div></a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>