CSS sub menu hover com css?

brunovianarenega · 26 de janeiro de 2022

Então, como eu faço para aparecer um sub menu onde as opções ficam na horizontal quando passo o mouse nas opções de Text +?

<nav class="navbar">
  <div class="logoinc">
    <a href="">
      <h1>Logo</h1>
    </a>
  </div>
  <div class="nav-desktop">
    <ul class="list-desktop">
      <li><a href="">Text</a>
      <li><a href="">Text</a>
      <li><a href="">Text +</a>
      <ul class="sub-list-desktop">
        <li>SubText</li>
        <li>SubText</li>
        <li>SubText</li>
        <li>SubText</li>
      </ul>
      <li><a href="">Text +</a>
      <li><a href="">Text +</a>
      <li><a href="">Text</a>
    </ul>
  </div>
  <div class="nav-icon-notification">
    <span><a href=""><img src="https://i.ibb.co/4SSLj2L/editar-perfil.png" alt="editar-perfil" border="0"></a></span>
  </div>
</nav>

segue imagem em anexo

css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  overflow-y: scroll;
  width: 100%;
  height: 100vh;
  background-color: rgba(50, 50, 50, 0.1);
}

a {
  display: block;
  text-decoration: none;
}

.logoinc a h1 {
    color: #000;
    font-size: 24px;
    text-align: center;
    letter-spacing: -2px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  max-height: 35px;
  padding: 10px 10px;
  border-radius: 1px;
  border-bottom: 1px solid rgba(50, 50, 50, 0.22);
}

.nav-desktop .list-desktop {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 1rem;

}

.list-desktop li a{
  color: black;
  padding: 20px;

}

.nav-icon-notification {
  display: flex;
  gap: 1rem;
  }

  .sub-list-desktop {
  display: none;

}