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>

Yep that's right, I don't get it why it doesn't work like I programmed it. Tried all sorts of things, also placing :hover on the images instead of the
@AndrévanderHeijden Check my answer you can do it with hover — Akshay, Oct 26 '14 at 09:29
@MisterManSam's: I went with your solution but your post is deleted now? Anyhow, thanks a lot man saved me hours of frustration and probably a few computer monitors. — André van der Heijden, Oct 26 '14 at 09:46

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

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>

Now it works, pretty much what I'm doing in my answer, just moving dropdown with translate. — dfsq, Oct 26 '14 at 09:49
All right, nice one didn't think of that myself. Good feature! — André van der Heijden, Oct 26 '14 at 10:01
@misterManSam Wait a sec, `pointer-events: none` was mine idea. But anyway I would go with hiding using `position: absolute;`. — dfsq, Oct 26 '14 at 10:05
@dsfq - To be honest - I haven't looked at any other answers, so it's still an original idea I guess. — misterManSam, Oct 26 '14 at 10:07
@dfsq - and even looking for it, I can't find where you said it :-\ — misterManSam, Oct 26 '14 at 10:08
@misterManSam http://stackoverflow.com/posts/26571584/revisions But nevermind, it makes no sense to use pointer-events here when you can go with cross-browser way. — dfsq, Oct 26 '14 at 10:36

score 0 · Answer 2 · answered Oct 26 '14 at 09:23

0

Approximately so:

<div class="menu_img_container">
  <img src="pic.jpg">
  <ul>
    <li><a href="#1">Item 1</a></li>
    <li><a href="#1">Item 2</a></li>
    <li><a href="#1">Item 3</a></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>

answered Oct 26 '14 at 09:23

bvn-2

26
1

Thanks for your help, but I want to do this with opacity:0 to 1 because of the transition effect. Might try this is quick fix though. – André van der Heijden Oct 26 '14 at 09:29
In IE don't forget to test. There can be problems. In this case on an equal basis with "opacity" it is possible to use "visibility". I so do – bvn-2 Oct 26 '14 at 10:24

score 0 · Answer 3 · answered Oct 26 '14 at 09:26

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;
}

score 0 · Answer 4 · answered Oct 26 '14 at 09:28

0

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;
    }

answered Oct 26 '14 at 09:28

william brandt

21
2

It's easy and it will work. But without nice opacity transition which I think is important in this case. – dfsq Oct 26 '14 at 09:36

dfsq · Answer 5 · 2014-10-26T09:42:33.297

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.

CSS Dropdown menu with images - Keep subitems from disappearing?

5 Answers5

Working Examples

#1 - using pointer-events

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

#1 - using `pointer-events`