Tengo un error, una mala maquetación al parecer en los estilos css o una mala practica en los estilos css, el problema consiste al cambiar el tamaño/ancho del navegador.
El contenido del Menú Dropdown Me no se adapta al cambiar la resolución de pantalla, esto sucede solamente en el código <ul id="dropdown">
del Menú Dropdown Me.
En cambio en el segundo menú de navegación <div id="nav">
en este código <div id="dropdown">
si se adapta el contenido del Menú Dropdown Me, a cualquier resolución de pantalla.
Por otra parte en el Menú Dropdown Me <ul id="dropdown">
al hacer clic en el enlace (Español), no aparece la flecha blanca hacia arriba en cambio en el Menú Dropdown Me <div id="dropdown">
si aparece.
Otro asunto que me tiene muy tenso es que si añado más de un Menú Dropdown Me. Este no se encima uno tras otro los enlace del menú salta de su ubicación esto sucede en el tercer menú <nav>
.
Ahora en el primer menú <nav
solo existe un Menú Dropdown Me. Este se adapta sin ningún problema es decir se encima los enlace uno tras otro al cambiar el tamaño del navegador o resolución de pantalla.
Aquí el código completo y el ejemplo en ejecución: https://jsfiddle.net/f8gtt13q/ Pueden observar los errores al cambiar de tamaño la ventana donde se encuentra el ejemplo en ejecución.
De todos modos aquí muestro el código completo, 3 ejemplos de menú de navegación:
$(document).ready(function(){
$('#dropdown li a').click(function(){
$('.dropdown-menu').hide();
var parent = $(this).parent().attr('id');
if ($('#'+parent+' .dropdown-menu').is (':hidden'))
$('#'+parent+' .dropdown-menu').show();
else
$('#'+parent+' .dropdown-menu').hide();
return false;
});
$('body,html').click(function(){
$('.dropdown-menu').hide();
});
});
body {
background: #000;
}
ul li {
list-style: none;
}
#nav {
height: 24px;
width: 1349px;
padding: 6px 0;
background: #fbfbfb url(../img/grad.png) center top repeat-x;
}
a {
color: #777;
text-decoration: none;
}
a:hover, a:focus {
color: #515151;
text-decoration: underline;
}
nav {
width: 100%;
height: 40px;
background-color: azure;
}
nav ul {
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
float: left;
text-align: center;
width: 16.6667%; /* fallback for non-calc() browsers */
width: calc(100% / 6);
box-sizing: border-box;
}
nav ul li:first-child {
border-left: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #616161;
padding: 10px 0;
}
ul#dropdown {
float: left;
}
#dropdown3 .dropdown-menu {
top: 170px;
left: 134px;
width: 140px;
display: none;
position: absolute;
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.98);
background-clip: padding-box;
border-radius: 5px;
border: 0 solid rgba(0,0,0,0.25);
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#dropdown4 .dropdown-menu {
top: 170px;
left: 234px;
width: 140px;
display: none;
position: absolute;
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.98);
background-clip: padding-box;
border-radius: 5px;
border: 0 solid rgba(0,0,0,0.25);
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#dropdown2 .dropdown-menu {
top: 110px;
left: -14px;
width: 140px;
display: none;
position: absolute;
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.98);
background-clip: padding-box;
border-radius: 5px;
border: 0 solid rgba(0,0,0,0.25);
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#dropdown1 .dropdown-menu {
top: 42px;
left: 120px;
width: 140px;
display: none;
position: absolute;
background-color: #FFFFFF;
background-color: rgba(255,255,255,0.98);
background-clip: padding-box;
border-radius: 5px;
border: 0 solid rgba(0,0,0,0.25);
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
#dropdown .dropdown-menu:after {
top: -6px;
left: 115px;
content: "";
position: absolute;
border-bottom: 6px solid #FFFFFF;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom-color: rgba(255,255,255,0.98);
}
.dropdown-menu li {
float: left;
width: 100%;
list-style: none;
}
.dropdown-menu li a {
clear: both;
color: #333333;
display: block;
line-height: 18px;
padding: 3px 15px;
font-weight: normal;
white-space: nowrap;
}
.dropdown-menu li a:hover {
color: #ffffff;
background-color:#333333;
}
#dropdown1 b.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: -8px;
margin-left: 62px;
}
#dropdown2 b.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: 8px;
margin-left: 2px;
}
#dropdown3 b.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: -8px;
margin-left: 58px;
}
#dropdown4 b.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: -8px;
margin-left: 36px;
}
#dropdown1 b.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
margin-top: -8px;
margin-left: 42px;
}
b.caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
.icon-phone:before {
content:"";
display:inline-block;
width:20px;
height:20px;
background-image:url(http://www.imyshop.tk/font/icon/icon-phone.png);
background-size:cover;
}
.icon-mail:before {
content:"";
display:inline-block;
width:16px;
height:16px;
background-image:url(http://www.imyshop.tk/font/icon/icon-contact1.png);
background-size:cover;
}
.icon-mail {
margin-left: -100px;
position: absolute;
padding: 10px;
}
.icon-phone {
margin-left: -65px;
position: absolute;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><i class="icon-phone"></i><a href="tel:+1234123">1234123</a></li>
<li><i class="icon-mail"></i><a href="#">[email protected]</a></li>
<ul id="dropdown">
<li id="dropdown1"><a href="#">Español <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Ruso</a></li>
<li><a href="">Ruso</a></li>
</ul>
</li>
</ul>
<li><a href="#">Login</a></li>
</ul>
</nav>
<br>
<div id="nav">
<div id="dropdown">
<ul>
<li id="dropdown2"><a href="#">Español <b class="caret"></b></a>
<ul class="dropdown-menu" style="display: none;">
<li><a href="">Hola</a></li>
<li><a href="">Hola</a></li>
</ul>
</li>
</ul>
</div>
</div>
<br><br>
<nav>
<ul>
<li><i class="icon-phone"></i><a href="tel:+1234123">1234123</a></li>
<li><i class="icon-mail"></i><a href="#">[email protected]</a></li>
<ul id="dropdown">
<li id="dropdown3"><a href="#">Español <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Español</a></li>
<li><a href="">English</a></li>
</ul>
</li>
</ul>
<ul id="dropdown">
<li id="dropdown4"><a href="#">Otro <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Otro1</a></li>
<li><a href="">Otro2</a></li>
</ul>
</li>
</ul>
<li><a href="#">Login</a></li>
</ul>
</nav>
ul
porque en los estilos tienes puestooverflow: hidden;
para la reglanav ul
(por eso sí se ve con eldiv
). Quita eseoverflow:hidden
y ya debería verse la flecha (aunque es blanca sobre fondo claro que hace que no se vea bien, pero está ahí)<ul id="dropdown">
y el otro asunto que si añado más de un Menú Dropdown Me. Este no se encima uno tras otro los enlace del menú se salta de su ubicación. disculpa amigo si es mucho abuso.