CODEWITHSUNDEEP
htmlcss
Codecygen
Codecygen

Reputation: 121

"hover" Selector Does Not Work with Flexbox to Change Dropdown Display to "none"

Hovering selector in css is not capable of making the child element disappear with display: none;

I have tried different selectors such as + it did not really work. I am a complete noob sorry for that.

*{
        margin: 0;
        padding: 0;
        /* Width and height apply to all parts of the element: content, padding and borders */
        box-sizing: border-box;
    }
    
    #menu{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    
    #logo{
        height: 70px;
        width: 70px;
    }
    
    div nav{
        display: flex;
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
        flex: 1; 
    }
    
    div nav ul{
        display: flex;
        flex-direction: row;
        background-color: mediumaquamarine;
        justify-content: space-between;
        flex: 1; 
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
    }
    
    div nav ul li{
        display: flex; /* These 3 lines or the align the bottons vertically */
        flex-direction: column; /* These 3 lines or the align the bottons vertically */
        justify-content: center; /* These 3 lines or the align the bottons vertically */
        list-style-type: none;
        background-color: blue;
        flex: 1; 
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
        position: relative;
    }
    
    div nav ul li a{
        display: flex; /* These 3 lines or the align the bottons vertically */
        flex-direction: column; /* These 3 lines or the align the bottons vertically */
        justify-content: center; /* These 3 lines or the align the bottons vertically */
        text-decoration: none;
        background-color: orange;
        height: 50px;
        text-align: center;
        margin: 0.5px;
    }
    
    div nav ul li a:hover{
        background-color: #9f7934;
    }
    
    #dropdown{
        display: flex;
        flex-direction: column;
        width: 100%;
        top: 60px;
        position: absolute;
    }
    
    #products:hover #dropdown{
        display: none !important;
    }
<!DOCTYPE html>
    
    <html>
    
    <head>
        <meta charset="UTF8">
        <meta http-equiv="refresh" content="180">
    
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
        <div id="menu">
            <img src="logo.jpg" alt="Smiley face" id="logo"> 
            <nav>
                <ul>
                    <li><a href="#">Anasayfa</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                    <li><a href="#" id="products">Ürünler</a>
                        <ul id="dropdown">
                            <li><a href="#">Ürün 1</a></li>
                            <li><a href="#">Ürün 2</a></li>
                            <li><a href="#">Ürün 3</a></li>
                            <li><a href="#">Ürün 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">İletişim</a></li>
                </ul>
            </nav>
        </div>
    
    </body>
    
    </html>
Child should disappear when products selected. Whenever I use hover on dropdown list i can make them disappear but it does not seem to work for parent.

Upvotes: 1

Views: 711

Answers (1)

doğukan
doğukan

Reputation: 27491

You should target the next sibling element

#products:hover + #dropdown


* {
  margin: 0;
  padding: 0;
  /* Width and height apply to all parts of the element: content, padding and borders */
  box-sizing: border-box;
}

#menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#logo {
  height: 70px;
  width: 70px;
}

div nav {
  display: flex;
  /* This flexbox property lets button area to fill-in the remainin space until the logo area */
  flex: 1;
}

div nav ul {
  display: flex;
  flex-direction: row;
  background-color: mediumaquamarine;
  justify-content: space-between;
  flex: 1;
  /* This flexbox property lets button area to fill-in the remainin space until the logo area */
}

div nav ul li {
  display: flex;
  /* These 3 lines or the align the bottons vertically */
  flex-direction: column;
  /* These 3 lines or the align the bottons vertically */
  justify-content: center;
  /* These 3 lines or the align the bottons vertically */
  list-style-type: none;
  background-color: blue;
  flex: 1;
  /* This flexbox property lets button area to fill-in the remainin space until the logo area */
  position: relative;
}

div nav ul li a {
  display: flex;
  /* These 3 lines or the align the bottons vertically */
  flex-direction: column;
  /* These 3 lines or the align the bottons vertically */
  justify-content: center;
  /* These 3 lines or the align the bottons vertically */
  text-decoration: none;
  background-color: orange;
  height: 50px;
  text-align: center;
  margin: 0.5px;
}

div nav ul li a:hover {
  background-color: #9f7934;
}

#dropdown {
  display: flex;
  flex-direction: column;
  width: 100%;
  top: 60px;
  position: absolute;
}

#products:hover+#dropdown {
  display: none;
}
<div id="menu">
  <img src="logo.jpg" alt="Smiley face" id="logo">
  <nav>
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Hakkımızda</a></li>
      <li><a href="#" id="products">Ürünler</a>
        <ul id="dropdown">
          <li><a href="#">Ürün 1</a></li>
          <li><a href="#">Ürün 2</a></li>
          <li><a href="#">Ürün 3</a></li>
          <li><a href="#">Ürün 4</a></li>
        </ul>
      </li>
      <li><a href="#">İletişim</a></li>
    </ul>
  </nav>
</div>

Upvotes: 1

Related Questions