0

Estoy replicando una web como practica y al intentar hacer un Dropdown hover menu al parecer no funciona correctamente. el dropdown menu tiene una display none por default, al hacerle hover al link tendria que aplicarle display flex pero no lo hace y no sucede nada. seguramente sea un error bastante basico que no estoy viendo. Intente realizarlo con ul y li pero me rompe toda la estructura del codigo que ya habia hecho y ademas que tampoco funciono. Copie el ejemplo de w3s school pero es muy basico y no me sirvio de nada, cabe aclarar que estoy haciendo todo con html y css unicamente. Tengo la sospecha de que puede ser un el div que coloque debajo del link (al cual al hacer hover, el menu debe desplegarse) pero como dije no veo error alguno y no puedo usar la consola para ver de donde viene el error. desde ya gracias y dejo mi codigo.

/* General */

* {
  margin: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  background-color: #f3ede5;
}


/* -------------------------- */


/* Navigation Bar & others */

.navbar {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 40px 0 40px 0;
}

.navbar nav a {
  margin: 0 20px 0 20px;
  text-decoration: none;
  color: black;
  font-size: 15px;
  transition: all .25s ease;
}

.navbar nav a:hover {
  color: #b5a58b;
  cursor: pointer;
}

#hoverthis {
  position: relative;
}

.signIn {
  text-decoration: none;
  font-size: 15px;
  color: black;
  margin-right: 10px;
}

.btn-su {
  background-color: #133416;
  color: white;
  border-style: none;
  font-weight: bold;
  border-radius: 5px;
  font-size: 16px;
  width: 155px;
  height: 55px;
  transition: all .25s ease-in-out;
}

.btn-su:hover {
  cursor: pointer;
  background-color: #8a9a8a;
}


/* ----------------------------- */


/* Main Container */


/* Main Content */

.grids {
  display: flex;
  justify-content: space-evenly;
  margin-top: 130px;
}

.text {
  max-width: 50%;
  margin: 100px 50px 50px 275px;
}

.text h1 {
  font-size: 80px;
}

.text span {
  color: #f7b300;
}

.text p {
  color: rgba(13, 12, 12, 0.792);
  margin: 15px 0 15px 0;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}

.text p:last-child {
  margin-top: 50px;
}

.text p i {
  align-items: center;
  margin: 0 5px 0 5px
}

.img-edit {
  max-width: 90%;
  height: 90%;
}


/* Footer Content */

.footer {
  text-align: center;
  margin: 60px 0;
}

.par {
  margin-bottom: 30px;
}

.par p {
  color: #6c6c6c;
}

.svgs img {
  margin: 0 30px 0 30px
}


/* Dropdown menu */

.speech-bubble {
  display: none;
  position: absolute;
  margin: 20px 0 10px 0;
  flex-direction: column;
  justify-content: center;
  height: 400px;
  padding: 50px;
  text-align: left;
  width: 450px;
  left: 650px;
  background-color: white;
  line-height: 22px;
  border-radius: 10%;
}

.navbar nav a:hover .speech-bubble {
  display: flex;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  border-bottom-color: white;
  border-top: 0;
  margin-left: -180px;
  margin-top: -11px;
}

.title-speech {
  color: #122d45;
  font-size: 18px;
}

.p-speech {
  font-size: 15px;
  margin-bottom: 15px;
  color: #85929f;
}

.content-bubble {
  display: flex;
  flex-direction: column;
}

.content-bubble i {
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Gabarito&family=Inter:wght@400;500;600&family=Prompt:wght@100&family=Roboto&display=swap" rel="stylesheet">
  <title>Ondeck</title>

</head>

<body>
  <div class="container">
    <div class="navbar">
      <div>
        <a href="#"><img src="Assets/Logo.svg" alt="ondeck-logo"></a>
      </div>
      <nav>
        <a href="#">Product</a>
        <div class="speech-bubble">
          <div class="content-bubble">
            <i><img src="Assets/Spense_Icon.svg" alt=""></i>
            <h1 class="title-speech">Spense</h1>
            <p class="p-speech">Spense is a landing page for writers. Great for practicing absolute positioning and flex layout.</p>

            <i><img src="Assets/Fiber_Icon.svg" alt=""></i>
            <h1 class="title-speech">Fiber Landing Page</h1>
            <p class="p-speech">An online portfolio generator. Great for practicing flex/grid layouts, and absolute positioning.</p>

            <i><img src="Assets/Gradie_Icon.svg" alt=""></i>
            <h1 class="title-speech">Gradie Sign Up Page</h1>

            <p class="p-speech">Gradie is a simple sign up page, great to practice centering layouts.</p>
          </div>
        </div>
        <a href="#">Resources</a>
        <a href="#">Challenges</a>
        <a href="#">Other Links</a>
      </nav>
      <div>
        <a class="signIn" href="#">Sign In</a>
        <button class="btn-su">Try For Free</button>
      </div>
    </div>
    <div class="main-container">
      <div class="grids">
        <div class="text">
          <h1>Ondeck is your remote<span> conference calling tool</span></h1>
          <p>Ondeck is a service that allows you to create beautiful, online, and encrypted videocalls for you and your remote team.</p>
          <button class="btn-su">Try For Free</button>
          <p>5.0 Rating based on reviews from:
            <i><img src="Assets/Capterra Logo.svg" alt=""></i>
            <i><img src="Assets/AlternativeTo Logo.svg" alt=""></i>
            <i><img src="Assets/minishopify.svg" alt=""></i>
          </p>
        </div>
        <div class="voice-add">
          <img class="img-edit" src="Assets/Hero Image.png" alt="">
        </div>
      </div>

      <div class="footer">
        <div class="par">
          <p>Trusted by 3+ million people at companies like</p>
        </div>
        <div class="svgs">
          <img src="Assets/Netflix Logo.svg" alt="">
          <img src="Assets/Shopify Logo.svg" alt="">
          <img src="Assets/Spotify Logo.svg" alt="">
          <img src="Assets/Walmart Logo.svg" alt="">
        </div>



      </div>
    </div>
  </div>

</body>
<script src="script.js"></script>

</html>

1 respuesta 1

1

Solo debes agregar un + en css después del :hover para que sepa que esta después de la etiqueta y no dentro:

.navbar nav a:hover +.speech-bubble {
  display: flex;
}
4
  • ah mira vos, ya me parecia raro que tuviera un error grande, cosas como estas me pasa por no estudiar a profundidad. gracias por la respuesta si me sirvio Commented el 12 oct. 2023 a las 15:44
  • si la respuesta responde a tu pregunta, favor márcala como la respuesta del post
    – otosankf
    Commented el 12 oct. 2023 a las 18:00
  • sisi ya lo marque, te puedo hacer otra consulta? es relacionado a la web que estoy replicando Commented el 12 oct. 2023 a las 21:20
  • si es una duda diferente, deberías abrir un post diferente
    – otosankf
    Commented el 13 oct. 2023 a las 12:04

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.