El diseño del menú esta funcionando muy bien en un 90% el cuerpo del menú se adapta al igual que la flecha blanca sin problema pero en una resolución de pantalla completa(1349px) o más.
Un pequeño detalle más es que si añado un enlace de dos palabras(Sign In) en el menú y al cambiar la resolución de pantalla este enlace de dos palabras se sale de su ubicación lo ideal seria que se encimara uno tras otro de tal manera como sucede con los otros enlace de una sola palabra.
Actualización:
*{
margin: 0px;
padding: 0px;
}
a {
color: #777;
text-decoration: none;
}
a:hover, a:focus {
color: #515151;
text-decoration: underline;
}
body {
background-color: aliceblue;
}
nav {
height: 24px;
width: 100%;
padding: 6px 0;
background: #fbfbfb url(../img/grad.png) center top repeat-x;
}
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: 3px 0;
/*padding: 10px 0;*/
}
#dropdown1, #dropdown2 {
position: relative;
}
.dropdown-menu {
z-index:2;
}
#dropdown b.caret {
/*position: relative;*/
position: absolute;
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-left: 3px;
top: 12px;
/*top: -8px;
left: 55px;*/
}
b.caret {
border-top-color: #777777;
border-bottom-color: #777777;
}
#dropdown .dropdown-menu {
/*top: 42px;
left: -50px;*/
/*left: 23px;
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;
right: 10px;
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;
}
<nav>
<ul>
<li><a href="">123456789</a></li>
<li><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="#">Español</a></li>
<li><a href="#">Español</a></li>
</ul>
</li>
</ul>
<ul id="dropdown">
<li id="dropdown2"><a href="#">Español <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Español</a></li>
<li><a href="#">Español</a></li>
</ul>
</li>
</ul>
<li><a href="">Sign In</a></li>
</ul>
</nav>