CSS Dropdown menu with images - Keep subitems from disappearing? - html

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>

Answer 2

Approximately so:
<div class="menu_img_container">
<img src="pic.jpg">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<style>
.menu_img_container
{
display: inline;
position: relative;
}
.menu_img_container ul
{
display: none;
position: absolute;
top: 50px;
left: 0;
}
.menu_img_container:hover ul
{
display: block;
}
</style>

Answer 3

You can prolong the hover effect using transitions http://jsfiddle.net/zn6j5xvv/
HTML
<div id="a">a
<div id="b">
<img src="http://placekitten.com/300/301"/>
</div>
CSS
#a{
width:50px;
height:50px;
background-color:green;
transition:0s 100s;
}
#b{
width:200px;
height:200px;
opacity:0;
transition:0s 100s;
}
#a:hover #b{
opacity:1;
transition:0s;
}

Answer 4

this should do the trick, just update these three parts of your css
li#dropdown {
height: 510px;
padding: 0px;
margin:0px;
display:none;
transition: all 0.5s;
}
li:hover + li#dropdown {
display: block; /* display the dropdown */
}
li#dropdown:hover{
display:block;
}

Answer 5

It's a little tricky, because you want to have a nice opacity transition. It would be much simpler with just display: none. But we can still make it work with transition if you use combination of position: absolute for hiding items and opacity for transition.
Move :hover selector from li to entire ul
ul:hover > li#dropdown {
opacity: 1;
top: auto;
}
li#dropdown {
height: 510px;
padding: 0px;
margin: 0px;
opacity: 0;
transition: all 0.5s;
position: absolute; /* move items far off the screen */
top: -1000px;
}
And it should work. So the idea is that #dropdown menu is moved outside the screen with position absolute, which make it impossible to hover over "invisible" items, so they don't appear on white area hover. However on the first item hover you bring dropdown back with top: auto which allows hovering it again. Transition will also work.