I needed my menu in the site below, open in left, so there is no layout break.
Could you help me?
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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>
<img src="../assets/img/logohome.png">
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">TRANSPORTE RODO LOTAÇÃO <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-left">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">TRANSPORTE RODO FRACIONADO <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">TRANSPORTE AÉREO <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-left ">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">TRANSPORTE MARÍTIMO <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-left">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">IÇAMENTOS E REMOÇÕES<i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-left">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Transporte Especial <i class="fa fa-angle-right" aria-hidden="true"></i></a>
<ul class="dropdown-menu dropdown-menu-left">
<li><a href="servicos.php">Caminhões Equipados com Guindautos</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
CSS
.navbar-inverse { background-color: rgba(0, 55, 104, 0.92);}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: transparent; border-bottom: 3px solid #FFFFFF; color: #FFFFFF;}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: transparent; border-bottom: 3px solid #FFFFFF; color: #FFFFFF;}
.dropdown-menu { background-color: rgba(0, 55, 104, 0.92);}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: transparent;}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: transparent;}
.navbar-inverse .navbar-brand { color: #FFFFFF}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF; line-height: 45px;}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
.navbar{margin-bottom:0px;}
.nav>li>a {position: relative;display: block;font-size: 11PX;padding: 10px 10px;}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border-color: transparent;}
.navbar-inverse .navbar-toggle {border-color: #FFFFFF;}
.navbar-toggle { background-color: rgba(0, 55, 104, 0.92);}
.marginBottom-0{margin-bottom:0;}
.dropdown-submenu{position:relative;}
.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;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover{background-color: rgba(0, 55, 104, 0.92);;border-color: rgba(0, 55, 104, 0.92);}
.fa-angle-right:before{margin-left:10px;}
@media (min-width: 768px){.navbar-nav { margin: 0;}}
.info span{padding:0px 10px 0px 10px;border-right:2px solid #e4e1e1;}
.info span:last-child{ border-right: none;}
.bg-menu{padding: 10px; border: none; background: #003768; color: #fff}
.social-links span{padding: 0px 10px;border-right: 2px solid #e4e1e1;}
.social-links span:last-child{border-right: none;}
.social-links span a{text-decoration: none; color: #fff; cursor: pointer;}
@media (max-width: 1099px){.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {color: #FFFFFF;}}
JS
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);