Sibling's child affecting sibling on hover

Question

I am trying to display a submenu when hovering over an anchor. Tried .expand:hover ~ .submenu or .expand:hover + .submenu but they don't seem to work because anchor is not a direct sibling of submenu. I have to hover over that particular li anchor Is there an HTML/CSS way of doing it. I know I can use JS to sort it out, but is there an HTML/CSS method?

.menu {
  display: block;
}

.menu-item {
  list-style-type: none;
}

.menu-item a {
  text-decoration: none;
  font-size: 30px;
  font-weight: bolder;
}

.submenu {
  width: 100px;
  height: 30px;
  background: yellow;
  display: none;
}

.expand:hover ~ .submenu {
  display: block;
}

<ul class"menu">
  <li class="menu-item expand"><a href="">EXPAND\/</a></li>
</ul>

<div class="submenu">
  <p>submenu</p>
</div>

Move the `expand` class to `
` and your problem should be fixed ;). You're missing an "=" sign in your HTML (`
`) by the way — Jake, Apr 10 '19 at 12:27

score 0 · Answer 1 · answered Apr 10 '19 at 12:29

You have to change the HTML structure since there is no way to access a parent element with CSS only. For example, move your submenu to be a descendant of the menu item. JS is not a bad idea, though...

.menu {
  display: block;
}

.menu-item {
  list-style-type: none;
}

.menu-item a {
  text-decoration: none;
  font-size: 30px;
  font-weight: bolder;
}

.submenu {
  width: 100px;
  height: 30px;
  background: yellow;
  display: none;
}

.expand:hover ~ .submenu {
  display: block;
}

<ul class"menu">
  <li class="menu-item expand"><a href="">EXPAND\/</a></li>
  <div class="submenu">
    <p>submenu</p>
  </div>
</ul>

Sibling's child affecting sibling on hover

1 Answers1