-4

Quando você passa o mouse em cima de qualquer item o ultimo item do menu fica abrindo sozinho

https://codepen.io/admtwbful/pen/bGzdMEB

.wrapper {
  width: 100%;
  padding: 5px;
  margin: 0 auto;
  clear: both;
  text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.menu {
  width: 100%;
  /* Se colocar 100% ele vai pro canto direito, se colocar 900px vai para o canto esquerdo o menu */
  margin: 0 auto;
}

ul.menu li {
  cursor: pointer;
  float: left;
  height: 50px;
  list-style: none;
  position: relative;
  width: 60px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

li.menu a {
  display: inline;
  width: 60px;
  height: 50px;
  text-decoration: none;
  color: #fff;
  position: absolute;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.menu:first-child a {
  background: #e8c813;
}

ul.menu li:nth-child(2) a {
  background: #ad1515;
}

ul.menu li:nth-child(3) a {
  background: #15ad36;
}

ul.menu li:nth-child(4) a {
  background: #2112a8;
}

ul.menu li:nth-child(5) a {
  background: #157dad;
}

ul.menu li:nth-child(6) a {
  background: #000000;
}

ul.menu li:nth-child(7) a {
  background: #9f9f00;
}

li.menu:first-child:hover {
  background: #e8c813;
}

li.menu:nth-child(2):hover {
  background: #ad1515;
}

li.menu:nth-child(3):hover {
  background: #15ad36;
}

li.menu:nth-child(4):hover {
  background: #2112a8;
}

li.menu:nth-child(5):hover {
  background: #157dad;
}

li.menu:nth-child(6):hover {
  background: #000000;
}

li.menu:nth-child(7):hover {
  background: #9f9f00;
}

ul.menu li:hover a {
  background-position: center;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

ul.menu li:hover {
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  width: 160px;
}

p.menu {
  color: #ffffff;
  font-size: 15px;
  height: 50px;
  width: 200px;
  letter-spacing: 0;
  text-align: center;
  margin: 0px auto;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.menu:hover p {
  color: #ffffff;
  font-size: 15px;
  height: 50px;
  width: 200px;
  letter-spacing: 0;
  text-align: center;
  margin: 0px auto;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*font-face*/

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
<div class="wrapper">
  <ul class="menu">
    <li class="menu">
      <a href="">A</a>
      <p class="menu"> ABBA </p>
    </li>

    <li class="menu">
      <a href="">V</a>
      <p class="menu"> VI </p>
    </li>

    <li class="menu">
      <a href="">M</a>
      <p class="menu"> Mukka </p>
    </li>

    <li class="menu">
      <a href="">U</a>
      <p class="menu"> Utility </p>
    </li>

    <li class="menu">
      <a href="">P</a>
      <p class="menu"> Pcs </p>
    </li>
    <li class="menu">
      <a href="">B</a>
      <p class="menu"> Biosho </p>
    </li>
    <li class="menu">
      <a href="">N</a>
      <p class="menu"> Notivi </p>
    </li>
  </ul>
</div>

2
  • A conversa foi movida para o chat. Evitem longas conversas nos comentários, antes de postar um comentário é importante entender a proposta dos comentários no site. Note que perguntas não podem depender de links externos (como repositórios), então para continuarmos dentro da finalidade do site é importante você editar a pergunta e trocar o código fornecido por um Exemplo Mínimo, Completo e Verificável do problema, de forma a facilitar a identificação e servir como referência para futuros visitantes. Agradecemos a compreensão.
    – Syzoth
    Commented 25/10/2023 às 16:34
  • Note que a publicação não está bloqueada, você ainda pode editar e melhorar a postagem conforme as orientações do primeiro comentário, assim que ajustar a publicação conforme a finalidade do site sua pergunta será avaliada na fila de analises por 5 diferentes usuários, se você tiver ajustado adequadamente ela será reaberta.
    – Syzoth
    Commented 25/10/2023 às 16:46

0

Pesquise outras perguntas com a tag .