CSS Dropdown menu with images - Keep subitems from disappearing?

Question

I have created a CSS dropdown menu based on four images. When I hover over the first one the three others appear using :hover on the first <li> which sets opacity of the three others to 1. However, I cannot accomplish that the three others remain present when I scroll down to them.

Here is the live site and this is the CSS and HTML:

ul {
  list-style: none;
  width: 200px;
  padding-left: 30px;
  margin: 0px;
  border: none;
  float: left;
  margin-right: 5px;
  z-index: 1;
  position: relative;
}
li#dropdown {
  height: 510px;
  padding: 0px;
  margin: 0px;
  opacity: 0;
  transition: all 0.5s;
}
li:hover + li#dropdown {
  opacity: 1;
  /* display the dropdown */
}
li#dropdown:hover li#dropdown {
  opacity: 1;
  /* display the dropdown */
}

<ul>
  <li id="noten">
    <img id="noten" src="http://www.placehold.it/100">
  </li>
  <li id="dropdown">
    <img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
    <img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
    <img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
  </li>
</ul>

Answer 1

You need to place the hover state on the dropdown element using: li:hover + li#dropdown, li#dropdown:hover.

Also, here are two examples that prevent the menu being displayed unwanted when the mouse is hovered underneath your dropdown.

Working Examples

#1 - using pointer-events

Best thing - transition fade-in and fade-out

Limitation - supported in all major browsers and IE 11 - If you must have IE10 and below support, this is possible. Depending on your requirements, this may not be a limitation. Here are two questions that discuss various alternatives for IE 10 and below - Question One and Question two.

pointer-events: none on the ul prevents the dropdown activating when it is not visible. It is cancelled on hover with pointer-events: auto

Hover over the image and the images that appear underneath on hover

ul {
  list-style: none;
  width: 200px;
  padding-left: 30px;
  margin: 0px;
  border: none;
  float: left;
  margin-right: 5px;
  z-index: 1;
  position: relative;
  pointer-events: none;
}
li#dropdown {
  height: 510px;
  padding: 0px;
  margin: 0px;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
}
li#noten {
   pointer-events: auto;
}
li:hover + li#dropdown, li#dropdown:hover {
  opacity: 1;
    pointer-events: auto;
  /* display the dropdown */
}

<ul>
  <li id="noten">
    <img id="noten" src="http://www.placehold.it/100">
  </li>
  <li id="dropdown">
    <img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
    <img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
    <img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
  </li>
</ul>

#2 Using translate to slide drop down up and then down on hover

Limitation - opacity does not fade out, only in

ul {
  list-style: none;
  width: 200px;
  padding-left: 30px;
  margin: 0px;
  border: none;
  float: left;
  margin-right: 5px;
  z-index: 1;
  position: relative;
}
li#dropdown {
  height: 510px;
  padding: 0px;
  margin: 0px;
  opacity: 0;
  transition: opacity 0.5s;
  position: absolute;
  transform: translateY(-100%);
}
li:hover + li#dropdown, li#dropdown:hover {
  opacity: 1;
transform: translateY(0);
  /* display the dropdown */
}

<ul>
  <li id="noten">
    <img id="noten" src="http://www.placehold.it/100">
  </li>
  <li id="dropdown">
    <img id="pitten" src="http://www.placehold.it/100" naptha_cursor="region">
    <img id="muesli" src="http://www.placehold.it/100" naptha_cursor="text">
    <img id="fruit" src="http://www.placehold.it/100" naptha_cursor="text">
  </li>
</ul>