z-index issue

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<header>
<div class="container-fluid container-nav">
                <div class="container container-wo-pad">
                    <div class="header-home">                       
                        <div class="site-title">                                 
                            <a href="/"><img class="logo" src="">
                            <h1>Site</h1></a>                                
                        </div>                         
                    </div>
                    <!-- navigation object : U Navigation Items -->
                    <div class="nav">
                        <div class="navControl">
                            <a class="nav-btn" href="#"><i class="fa fa-bars" aria-hidden="true"></i> Navigation</a>
                        </div>

                        <ul class="nav-root">
                            <li class="has-sub nav-root-item">
                                <a href="">LinkLinkLinkLink <span class="show-carrot">&#9662;</span> </a>
                                <span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
                                <ul class="dropdown sub-drop">
                                    <li><a href="">Link</a></li>
                                    <li class="has-sub">
                                        <a href="">Link <span class="show-carrot">&#9662;</span> </a>
                                        <span class="open-icon"><i class="fa fa-plus open-close" aria-hidden="true"></i></span>
                                        <ul class="dropdown sub-drop">
                                            <li><a href="">Link</a></li>
                                            <li><a...

CSS

.container-nav {
  background-color: #00bcd4;
  margin-top: -1px; /* compensate for when alert isn't there */
  padding-bottom: 10px;
}

.nav .navControl {
  display: none;    
  cursor: pointer;
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 10px 0;
}

.open-icon {
  float: right;
  padding: 15px 20px;
}

.nav ul {
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.nav li {
  /* margin-left: -4px; */
  display: block;    
  position: relative;    
  font-size: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav a {
  padding: 15px 20px;
  display: inline-block;    
  color: #fff;
  text-decoration: none;
  text-align: left;
}

.nav a:hover {
  color: #fff;
}

.nav-root li a {
  text-decoration: underline;
}

.nav .dropdown {
  text-align: left;
  width: 100%;
}

.nav .dropdown li {
  margin: 0;
  display: block;
}

.nav .dropdown a {
  padding: 15px 20px;
  border-right: 0;
  margin-right: 10px;
  text-shadow: 0px 1px 1px #b9afaf;
}

.nav .dropdown li:last-child a {
  margin-right: 0;
}

.has-sub .open-icon {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.sub-drop {
  display: none;
  background-color: #0097A7;
}



/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
  .site-title {
    width: 100%;
  }
  .site-title h1{
    font-size: 33px;
  }        
  .search {
    width: 100%
  }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}
@media all and (max-width: 600px) {
  .site-title {
    width: 100%;
    text-align: center;
  }
  .search {
    width: 100%
  }
  .nav .navControl {
    display: block;
  }

  .nav-root {
    display: none;
  }

  .show-carrot {
    display: none;
  }
}

@media all and (min-width: 600px) {
  .site-title {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
  }
  .search {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
  }
  .search-field...

JavaScript

$(document).ready(function() {

    $('.dropdown').parent().hover(function() {
    var menu = $(this).find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    }
    });
});