Porque se mueve de lugar?

Avatar

@hectorenriquemaldonado70717

con fines de practica imite el menu de Usuario de Edteam, pero cuando lo abro con un target el botón se mueve de lugar no se queda ahí, alguien sabe porque? en la primera imagen aun no lo abro, pero en la segunda ya lo abrí y el botón se fue hacia arriba no permaneció en su lugar. ayuda amigos. gracias.

Avatar

@diegohuatuco

Hola Hector, puedes poner todo el código html y css para poder ayudarte? Saludos.

Avatar

@hectorenriquemaldonado70717

<nav id="user">
<div class="main">
  <div class="head">
    <a href=""><img src="https://api.ed.team/files/avatars/c725e24d-2f99-4e68-8eb8-1ccabc2db3f2.jpg" alt=""></a>
    <p class="head-name">Hector Enrique Maldonado</p>
  </div>
  <p class="head-mail">@HectorEnriqueMaldonado</p>
  <a href="#" class="premiun">Sube a premium</a>
</div>
  
  <div class="main2">
    <ul>
      <li><a href="#" class="main2-link">Mi perfil</a></li>
      <li><a href="#" class="main2-link">Mis cursos</a></li>
      <li><a href="#" class="main2-link">Mis notas</a></li>
      <li><a href="#" class="main2-link">Mis estudios</a></li>
      <li><a href="#" class="main2-link">Suscripcion</a></li>
    </ul>
  </div>
  
  <div class="main2">
    <a href="#" class="main2-link main3-link">Cerrar Sesion</a>
  </div>
  </nav>```




este es mi CSS

 ```*{
  box-sizing:border-box;
  margin-top:0;
}
body{
  margin:0;
  width:100%;
  height:100vh;
  font-family:sans-serif;
}
nav{
  display:flex;
  flex-direction:column;
  width:250px;
   margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 16px -2px  rgba(0,0,0,.15);
  border-radius:8px;
  display:none;
  
}
nav:target{
  display:block;
  position:absolute;
  top:130px;
  right:345px;
}

.main{
  width:100%;
  padding:1rem;
  border-bottom: 1px solid #eee;
}
.head{
  width:100%;
  display:flex;
  align-items:center;
  
}
.head-name{
  margin:0;
  font-size:14px;
  font-weight: 600;
  margin-left: 7px;
  margin-bottom: 9px;
}
.head-mail{
  font-size: 13px;
  color:#777;
  font-weight: 400;
  margin-left: 32px;
   margin-bottom: 5px;
}
img{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
}

a{
  text-decoration:none;
}
.premiun{
  color:hsl(200,100%,30%);
  font-size:14px;
}

.main2{
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
ul{
  list-style:none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.main2-link{
  font-size:13.5px;
  color:#555;
  padding: 6px 16px;
  display:block;
  letter-spacing: .03rem;
}

li:hover{
  background:#eee;
}
.main3-link:hover{
  background:#eee;
}

.main3-link{
  color:Red;
}


.perfil{
  font-size:1.3em;
  padding: 5px;
  width:110px;
  background:hsl(200,100%,45%);
  display:block;
  color:#eee;
  text-align:center;
  margin: 5rem auto;
  border-radius:5px;
  position:relative;
} ```
Avatar

@fabri

Te invito a que revises este link https://codepen.io/Fabricio93/pen/xNXWwK y este https://codepen.io/Fabricio93/pen/XwjymY. El primero es un menu que se muestra al hacer clic en un boton y el segundo un modal que se muestra tambien al presionar un boton, ambos hechos solo con html y css. Están hechos de la misma manera a nivel funcional, con checkbox que se activan y desactivan al hacerles clic. Te puede servir para lo que quieres hacer.

Recuerdainiciar sesiónpara participar en la comunidad.