I imagine that each <li>
be a menu button, where is also included a <ul>
which is the menu dropdown of the respective button.
In this, the correct menu selector, from 6 to 10, would be:
#main-navigation-2 nav ul li.dropdown:nth-child(6) ul,
#main-navigation-2 nav ul li.dropdown:nth-child(7) ul,
#main-navigation-2 nav ul li.dropdown:nth-child(8) ul,
#main-navigation-2 nav ul li.dropdown:nth-child(9) ul,
#main-navigation-2 nav ul li.dropdown:nth-child(10) ul
{
right: 0;
left: auto;
}
Or simply create a class
and add to the elements:
ul.menu_direita{
right: 0;
left: auto;
}
Test (run in full screen):
ul.menu_direita{
right: 0;
left: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="main-navigation-2" class="hidden-xs col-sm-12 col-md-12">
<!--<div class="container">-->
<nav class="navbar-main-navigation mb-xs-10" role="navigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Banheiro</p></a>
<ul class="dropdown-menu menu-right">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Cozinha</p></a>
<ul class="dropdown-menu menu-right">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Infantil</p></a>
<ul class="dropdown-menu menu-right">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Jarras & Copos</p></a>
<ul class="dropdown-menu dropdown-menu-right" style="float: right;">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Limpeza</p></a>
<ul class="dropdown-menu menu-right">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Mesa</p></a>
<ul class="dropdown-menu menu-right menu_direita">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Microondas</p></a>
<ul class="dropdown-menu menu-right menu_direita">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Organização</p></a>
<ul class="dropdown-menu menu-right menu_direita">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Potes</p></a>
<ul class="dropdown-menu menu-right menu_direita">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" tabindex="0">
<img class="img-responsive thumb-0" src="assets/images/menu-icones-black/image.jpg" /><p>Tábuas</p></a>
<ul class="dropdown-menu menu-right menu_direita">
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<li><a class="imagem-horizontal" href=""><img class="thumb" src="assets/Imagens/foto-1-12.jpg" /></a></li>
<br><span class="pull-right">+ PRODUTOS</span>
</ul>
</li>
</ul>
</nav><!-- .navbar-collapse -->
<!--</div>-->
</div><!-- #main-navigation -->
Can I give you a tip to make your life easier? If it’s no problem, put the Green Bar with 100% Width and align the items in the Center. So it will give you less headache to leave everything Responsive without JS etc...
– hugocsl
Thanks for the tip, but I plan to go with him to the screen-tablet only !
– denis
Did you notice that you wrote "rihgt:0;" wrong? It should be RIGHT, in your code is spelled wrong! []s
– hugocsl
Put the full code from the menu so we can analyze.
– Sam
Hugocsl I saw thanks but not that same funf !
– denis
dvd I updated the code I think you can now understand
– denis