Bootstrap 3 dropdown menu in Wordpress - wordpress

Question

I have coded a Bootstrap 3 dropdown menu in the static site proof. The client wants sub-menus and I have that working. I have made the menus in Wordpress but now the sub-menus are not working. Here is the html:
<!-- Main navbar ================================================== -->
<!-- <div class="row"> -->
<nav class="navbar navbar-default main-navbar" role="navigation">
<div class="container">
<div class="navbar-header main-nav">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- .navbar-header -->
<div id="navbar"class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Who We Are<span class="caret"></span>
<ul class="dropdown-menu">
<li>Our Story</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Our Team</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Staff</li>
<li>Board Members</li>
</li>
</ul>
</li>
<li>FAQ</li>
</ul>
</li>
<li class="dropdown">
Sports<span class="caret"></span>
<ul class="dropdown-menu">
<li>Olympic</li>
<li>Paralympic</li>
</ul>
</li>
<li class="dropdown">
Athletes and Coaches<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Athletes</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Current</li>
<li>Alumni</li>
<li>NEXTGEN</li>
<li>Up and Coming</li>
</li>
</ul>
</li>
<li>Coaches</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Training Groups</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Curling</li>
<li>Diving</li>
<li>Senior Women's Volleyball</li>
<li>Senior Women's Wheelchair Basketball</li>
<li>Wesmen Wrestling</li>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Partnerships<span class="caret"></span>
<ul class="dropdown-menu">
<li>Sport Canada</li>
<li>Own the Podium</li>
<li>Sport Manitoba</li>
<li>COPSIN</li>
<li>Coaching Association of Canada</li>
<li>National Coaching Institute</li>
<li>Corporate Community</li>
</ul>
</li>
<li class="dropdown">
Service Delivery<span class="caret"></span>
<ul class="dropdown-menu">
<li>IST</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Sport Science</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Sport Dietetics</li>
<li>Sport Psychology</li>
<li>Physiology</li>
<li>Strength and Conditioning</li>
</li>
</ul>
</li>
<li>Sport Medicine</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Life Services</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Game Plan</li>
</li>
</ul>
</li>
<li>Elegibility</li>
</ul>
</li>
<li class="dropdown">
What’s Happening<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Calendar of Events</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>External</li>
<li>CSCM</li>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">In The News</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>Latest News</li>
<li>Press Releases</li>
<li>Archive</li>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Community Involvement</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<li>IMPACT Camps</li>
<li>Sports and Arts Program</li>
</li>
</ul>
</li>
<li>Event Sign-up & Registration</li>
</ul>
</li>
</ul>
</div><!--/.collapse navbar-collapse -->
</div><!-- container -->
</div>
</nav><!-- .navbar navbar-default main-nav -->
The CSS is:
#header {
z-index: 99999;
}
#navbar {
padding-left: 25px;
padding-right: 0px;
}
.navbar {
margin-bottom: 0px;
}
.navbar-default .navbar-nav > li > a {
font-family: $sans-serif;
font-size: 1em;
color:$text-color;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 23px;
border-radius: 0px;
}
.container-fluid {
margin-left: auto;
margin-right: auto;
}
.nav > li {
padding-left: 10px;
}
.navbar-wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar-default {
border: none;
border-radius: 0px;
background: #d1d1d1;
}
.main-nav {
height: 40px;
background: #d1d1d1;
text-align: center;
border-radius: 0px;
}
.main-nav li a {
font-family: $sans-serif;
font-size: 1em;
color:$text-color;
padding-left: 15px;
padding-right: 15px;
}
.main-nav .nav {
float: none;
}
.main-nav .nav > li {
display: inline-block;
float: none;
/* margin: 0 5px;*/
vertical-align: middle;
}
/*.main-nav .nav li a {
color:$text-color;
width: 100%;
}*/
.main-nav .nav li a:hover {
color: #a31c27;
}
.main-nav .nav a {
width:100%;
height:auto;
vertical-align:middle;
display:inline-block;
}
.navbar-nav > li > .dropdown-menu {
background: #d1d1d1;
color: $reversed-color;
}
.navbar-wrapper > .container {
padding-right: 0;
padding-left: 0;
}
.navbar-wrapper .navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar-wrapper .navbar .container {
width: auto;
}
.dropdown-menu > li > a {
font-family: $sans-serif;
line-height: 2em;
}
.dropdown-submenu > li > a:focus,
.dropdown-submenu > li > a:hover {
color: #262626;
text-decoration: none;
background-color: #F5F5F5;
}
.dropdown-submenu {
position:relative;
padding-right: 15px;
}
.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 6px;
border-radius:0 6px 6px 6px;
background-color: #d1d1d1;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
background: #d1d1d1;
}
.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: $text-color;
margin-top:5px;
margin-right:-12px;
}
.navbar-default .navbar-nav > li > a:hover {
color: $primaryColor;
background-color: $background;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: none;
}
.dropdown-backdrop {
position: static;
}
.dropdown-menu li:hover > .dropdown-menu {
visibility: visible;
display: block;
top: 0px;
left: 100%;
}
.dropdown-menu 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: $text-color;
margin-top:5px;
margin-right:-12px;
}
If someone can give me a hand that would be great.