2

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.

introducir la descripción de la imagen aquí

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>

2
  • La flecha blanca no aparece con el ul porque en los estilos tienes puesto overflow: hidden; para la regla nav ul (por eso sí se ve con el div). Quita ese overflow:hidden y ya debería verse la flecha (aunque es blanca sobre fondo claro que hace que no se vea bien, pero está ahí)
    – Alvaro Montoro
    el 10 ago. 2016 a las 3:14
  • @AlvaroMontoro Perfecto amigo un problema resuelto muchas gracias, y sobre el contenido del Menú Dropdown Me, que no se adapta amigo <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.
    – Otto
    el 10 ago. 2016 a las 3:24

1 respuesta 1

1

La flecha blanca no aparece con el ul porque en los estilos tienes puesto overflow: hidden; para la regla nav ul (pero no los tiene para el div, por eso sí se ve con él). Quita ese overflow:hidden y ya debería verse la flecha (aunque es blanca sobre fondo claro que hace que no se vea bien, pero está ahí)

nav ul {
  /* overflow: hidden;*/
  margin: 0;
  padding: 0;
}

Y ahora, la posición de las cajas es interesante, porque se hace con position:absolute. Al tener posición absoluta, sus coordenadas (top y left en este caso) van a depender del primer ancestro que tenga una posición especificada (relativa o absoluta). Como ningún ancestro tiene la posición especificada, se tomarán las coordenadas del documento, y por eso se "rompe" cuando cambia el tamaño el navegador: porque el menú cambia de posición, pero no la caja que hace popup.

Para que la posición de la caja sea absoluta, pero relativa al enlace que la abre, debes añadirle position:relative al li que lo contiene y entonces definir unas nuevas coordenadas. Que en este caso podrían fácilmente ser 0 y 0, pero que parece que top:42px y left:-50px se ajusta más o menos bien a todos.

/* código nuevo */
#dropdown1, #dropdown2, #dropdown3, #dropdown4 {
  position:relative;
}

#dropdown1 .dropdown-menu {
    top:42px;
    left:-50px;
    /* resto de estilos; e igual para dropdown2, dropdown3, etc. */
}

Finalmente, para que la caja quede encima de los menús superiores, deberías ponerle un z-index mayor (en este caso, cualquier valor valdría porque los menús no tienen z-index).

.dropdown-menu {
    z-index:2;
}

Con esos cambios, el código quedaría así (sólo he hecho cambios en el CSS y los he comentado):

$(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;
}

/* posicion relativa para los contenedores de las cajas*/
#dropdown1, #dropdown2, #dropdown3, #dropdown4 {
  position:relative;
}

/* z-index para que se quede encima de los menus inferiores */
.dropdown-menu {
  z-index:2;
}

#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 {
  /* elimina esto --- 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: 42px;
  left: -50px;
  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: 42px;
  left: -50px;
  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: 42px;
  left: -50px;
  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: -50px;
  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>

5
  • perfecto amigo jamás pensé que los estilos css me fuera a complicar tanto, amigo no explicaste que sucede si añado más de un menú Dropdown Me, en el primer menú de navegación por que al poner más de un menú Dropdown Me, y al cambiar el tamaño del navegador los menú Dropdown Me, se salta de su ubicación es decir no se encima uno tras otro, o con la respuesta que publicaste amigo puedo poner más de un menú Dropdown Me, sin que cause el desordenamiento que causa el tercer menú de navegación.
    – Otto
    el 10 ago. 2016 a las 4:13
  • Eso debería estar ya corregido con este código. Si te fijas en la última navegación, tiene dos menús (Español y Otro) y los dos estan bien y ordenados... Pero dime si no lo están y lo miro
    – Alvaro Montoro
    el 10 ago. 2016 a las 4:17
  • bueno en realidad amigo en los dos menús (Español y Otro), al cambiar el tamaño del navegador el menú Otro se salta de su ubicación en cambio en el primer menú de navegación no pasa aquello aunque el primer menú de navegación solo existe un menú pero el login se adapta sin que se salte de su ubicación lo que no se si pongo otro menú suceda lo mismo, pero en los dos menú no se encima uno tras otro amigo el menú otro se salta de su ubicación.
    – Otto
    el 10 ago. 2016 a las 4:21
  • No termino de comprender. ¿Para qué tamaño de pantalla ocurre? Yo veo siempre el menú Otro correctamente donde debe estar. Igual se me ha pasado algo
    – Alvaro Montoro
    el 10 ago. 2016 a las 4:26
  • Gracias amigo por tu respuesta eh solucionado la mayor parte del menú, jamás pensé que los estilos css me fuera a complicar tanto, bueno amigo a pesar de que eh solucionado la mayor parte del menú aun tengo algunos detalles por solucionar que aún no eh dado con la solución Aquí el enlace de una nueva pregunta detallando los detalles del los pequeños problemas http://es.stackoverflow.com/questions/20185/c%C3%B3mo-adaptar-men%C3%BA-responsive-jquery-css
    – Otto
    el 10 ago. 2016 a las 20:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.