3

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>

2 respuestas 2

2

La flecha blanca de los idiomas se dibuja con un ::after en esta clase: #dropdown .dropdown-menu::after. El problema es que está posicionada respecto al lado izquierdo y cuando cambia el tamaño se desajusta, si borras la propiedad left y añades un valor para right, por ejemplo 10px u otro que te vaya mejor se soluciona ese problema:

#dropdown .dropdown-menu::after {
    top: -6px;
    right: 10px;
    content: "";
    position: absolute;
    border-bottom: 6px solid #FFF;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom-color: #fff;
}

Para que no te salte a otra línea un texto de varias palabras puedes usar white-space: nowrap;

Aquí se puede ver tu ejemplo con mis cambios: https://jsfiddle.net/blonfu/xe4k5n4x/1/

0

tendrías que definir media queries según el tamaño de la pantalla.

te dejo este link para las media queries de developer mozilla.

te dejo un ejemplo que se usa en bootstrap, no es exactamente el de bootstrap, Bootstrap utiliza media queries de CSS que varean según el tamaño de la pantalla 750px, 970px o 1170px. Obviamente tendrías que diseñar primero para un móvil después ir subiendo a pantallas más grandes así se simplificaría donde aplicarías los media queries.

//moviles
.caracs{
    width: 350px;
    font-family: 'Poppins', sans-serif;
}
//tabletas
@media (min-width: 768px) { 
    .caracs{
        width: 500px;
        font-family: 'Poppins', sans-serif;
    } 
}
//laptops o pantallas chicas de escritorio
@media (min-width: 992px) { 
    .caracs{
        width: 810px;
        font-family: 'Poppins', sans-serif;
    } 
}
//pantallas de escritorios grandes
@media (min-width: 1200px) { 
    .caracs{
        width: 1010px;
        font-family: 'Poppins', sans-serif;
    } 
}
1
  • amigo si puedes observar no estoy utilizando aún ninguna @media ningú estilo de lo que me indicas... Pero aún así el menu es responsive y adaptable. Por ahora primeramente quiero es adaptar sin utilizar @media para luego si utilizarlos para evitar que se encimen uno tras otro por ahora lo que quiero es que se encime uno tras otros los enlace del menú de dos palabras(Sign In). No cuestiono su respuesta pero esta demás lo que me indicastes.
    – Otto
    el 10 ago. 2016 a las 23:22

Tu Respuesta

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

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