-1

mi problema es el siguiente, cuando trato de hacer mi menú desplegable, básicamente me permite hacerlo, pero se acumula todo en uno, y no permite ver las demás, no sé como solucionar eso.

Esto es lo que me muestra:

introducir la descripción de la imagen aquí

Cuando debería mostrarme esto

introducir la descripción de la imagen aquí

Pero arriba del todo, intenté hacerlo con z.index, inclusive, elevándolo al 999 pero sigue sin funcionar correctamente

https://codepen.io/padr-n-rocha/pen/WWpJvV

Bueno, precisamente el problema radica en que no se posiciona correctamente los bloques como deberían

7
  • 1
    Tu link envia a una direccion vacia, prueba usando el snipet del editor de texto de aqui. Commented el 10 abr. 2019 a las 15:22
  • codepen.io/padr-n-rocha/pen/WWpJvV ya lo corregí Commented el 10 abr. 2019 a las 15:26
  • pero el link que pusiste se mira bien Commented el 10 abr. 2019 a las 15:29
  • No estoy seguro, si no estoy entendiendo tu problema, o en el codepen que dejaste funciona perfecto.. Commented el 10 abr. 2019 a las 15:31
  • 1
    Solo aplica el position: absolute a la clase .dropdown Commented el 10 abr. 2019 a las 15:47

1 respuesta 1

4

El problema es que estas declarando la propiedad position: absolute en el elemento .row del dropdown:

header .usuario .dropdown .row {
    /* position:absolute; */
 }

Esto apunta a todos los elementos hijos dentro del menu, y al tener todos posicion absoluta, se colocan uno encima del otro; simplemente basta con mover esta propiedad al elemento .dropdown como tal para que sea el cajon entero el que se posicione de manera absoluta

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  background: #141938;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", Arial, Sans-serif;
  font-weight: normal;
}

a {
  text-decoration: none;
  color: #BB1F35;
}

a:hover {
  text-decoration: underline;
}

.contenedor {
  max-width: 1000px;
  width: 90%;
  margin: auto;
}

.izquierda {
  float: left;
}

.derecha {
  float: right;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.halfUp {
  margin-bottom: -15px;
}

.spaceDown {
  margin-bottom: 30px;
}


/* --- Header ---*/

header {
  color: #fff;
  background: #4b0082;
}

header .contenedor {
  overflow: hidden;
}

header .logo {
  max-width: 300px;
}

header .logo a {
  color: #fff;
  font-family: "Oswald", Arial, Sans-serif;
  font-size: 28px;
  line-height: 70px;
}

header .logo a:hover {
  text-decoration: none;
}

header .buscar {
  display: inline-block;
  position: relative;
  margin-right: 15px;
}

header .buscar input[type="text"] {
  background: none;
  border: 1px solid rgba(255, 255, 255, .7);
  color: rgba(255, 255, 255, .7);
  height: 30px;
  padding: 0 10px;
  padding-right: 32px;
}

header .buscar input[type="text"]:hover,
header .buscar input[type="text"]:focus {
  color: #fff;
  border: 1px solid #fff;
}

header .buscar .icono {
  color: rgba(255, 255, 255, .7);
  position: absolute;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-size: 16px;
  line-height: 16px;
}

header .buscar .icono:hover {
  color: #fff;
}

header .contacto,
header .usuario {
  display: inline-block;
}

header .contacto ul {
  list-style: none;
}

header .contacto ul li {
  display: inline-block;
  line-height: 70px;
}

header .contacto ul li a {
  color: #fff;
  display: block;
  padding: 0px 20px;
  font-weight: bold;
}

header .contacto ul li a:hover {
  background: #000;
  text-decoration: none;
}

header .contacto ul li a .icono {
  margin-left: 15px;
}


/************* AQUI LA NUEVA PROPIEDAD*********************/

.dropdown {
  position: absolute;
}


/**********************************************************/

header .usuario .dropdown .row {
  padding: 12px 15px;
  background-color: #f8f8f8;
  color: #888888;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
}

header .usuario .row .text {
  font-size: 16px;
}

header .usuario .row .icon {
  font-size: 20px;
}

header .usuario .panel :hover {
  color: #6c6c6c;
  cursor: pointer;
}

header .usuario input#toggle {
  display: none;
}

header .usuario input#toggle~.dropdown {
  display: block;
  z-index: 50;
}

header .usuario input#toggle:checked~.dropdown {
  display: none;
}

header .usuario .dropdown {
  margin-top: 7px;
}

header .usuario .dropdown .arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid #f8f8f8;
  margin-left: 20px;
}

header .usuario .dropdown .row {
  border-radius: 0;
  box-shadow: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-align: left;
}

header .usuario .dropdown .row:nth-child(2) {
  border-radius: 3px 3px 0 0;
}

header .usuario .dropdown .row:last-child {
  border-radius: 0 0 3px 3px;
}

header .usuario .dropdown:hover>.row {
  color: #bebebe;
}

header .usuario .dropdown .row:hover {
  background-color: #ebebeb;
  color: #6c6c6c;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="estilos.css">
  <title>Blog</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src="https://cloud.tinymce.com/5/tinymce.min.js?apiKey=yykc751rqk9e1w78c0pzk31233fnstxsrt2j79ji3qbp553n"></script>
  <script>
    tinymce.init({
      selector: 'textarea'
    });
  </script>
</head>

<body>
  <header>
    <div class="contenedor">
      <div class="logo izquierda">
        <p>
          <a href="#">Proyecto ADMUS</a>
        </p>
      </div>
      <div class="derecha">
        <form name="busqueda" class="buscar" action="buscar.php" method="get">
          <input type="text" name="busqueda" placeholder="Buscar"><button type="submit" class="icono fa fa-search"></button>
        </form>
        <nav class="contacto">
          <ul>
            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
            <li><a href="#"><i class="far fa-envelope"></i></a></li>
          </ul>
        </nav>
        <nav class="usuario">
          <div class="panel">
            <label class="text" for="toggle">Master Web</label>&nbsp;
            <label class="icon fas fa-angle-down" for="toggle"></label>
          </div>
          <input type="checkbox" id="toggle">
          <div class="dropdown">
            <div class="arrow"></div>

            <a href="#" class="row">
              <div class="text">Edit User</div>
              <i class="icon fas fa-user"></i>
            </a>
            <a href="#" class="row">
              <div class="text">Recents Comments</div>
              <i class="icon far fa-comment-alt"></i>
            </a>
            <a href="#" class="row">
              <div class="text">favorites</div>
              <i class="icon fas fa-heart"></i>
              <!--i class="fas fa-hand-holding-heart"></i!-->
            </a>
            <a href="#" class="row">
              <div class="text">Log out</div>
              <i class="fas fa-sign-out-alt"></i>
            </a>
            <a href="#" class="row">
              <div class="text">Admin Settings</div>
              <i class="icon fas fa-cog"></i>
            </a>
          </div>
        </nav>
      </div>
    </div>
  </header>
</body>

</html>

1
  • WOOOOOOOOOOOOOOOO, muchas gracias c: Commented el 10 abr. 2019 a las 18:56

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.