Display: none property is not working for li

Question

The dropdown-menu div contains five list items. The display property of dropdown-menu div is set to none and it can be toggled on and off by hovering over the dropdown div. However, the list items do not follow this behavior and are displayed regardless of the hover effect. Why?

Furthermore, commenting out the overflow: hidden line causes the list items to become invisible. Why?

body {
  margin: 0;
}

header {
  width: 100%;
  background-color: lightgray;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.up-head {
  width: 100%;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.up-head ul {
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 18px;
  font-weight: 800;
}

.up-head li {
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #f9f9f9;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

<body>
  <header>
    <div class="up-head">
      <ul>
        <li>Home</li>
        <li>Language
          <div class="dropdown">
            <ul class="dropdown-menu">
              <li>Japanese</li>
              <li>English</li>
              <li>Deutsch</li>
              <li>Chinese</li>
              <li>Korean</li>
            </ul>
          </div>
        </li>
        <li>About</li>
        <li>Log in</li>
      </ul>
    </div>
  </header>
</body>

it's all about [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - your `.up-head ul` is more specific than `.dropdown-menu` so that display style is being applied — Pete, Feb 10 '23 at 10:48
FYI, the `.dropdown:hover .dropdown-menu` is not gonna work because **div.dropdown**'s height is 0 due to `.dropdown-menu` having *display:none* and you could never *hover* on it , so you should try with `.up-head > ul > li:hover .dropdown-menu` instead. — Zeikman, Feb 10 '23 at 10:55

Display: none property is not working for li

0 Answers0