Clever Geek Handbook

CSS dropdown menu with images. Don't leave subparagraphs from disappearing?

I created a CSS dropdown menu based on four images. When I hover over the first, three others will appear: hover over the first one <li>

, which sets the opacity of the other three to 1. However, I cannot make sure that the other three remain when I scroll down to them.

Here's a live site and it's 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>
Run code


+3


source to share


5 answers


You need to put the state hangs in the drop-down item, using: li:hover + li#dropdown, li#dropdown:hover

.

In addition, here are two examples that prevent unwanted menu display when the mouse hovers under the dropdown.

Working examples

# 1 - using pointer-events

Best is fade out and fade out

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

pointer-events: none

on ul

prevents the dropdown menu from being activated when it is not displayed. It is canceled on hover withpointer-events: auto



Hover your mouse over the image and images that appear under 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>
Run code


# 2 Using translation to slide down and then down on hover

Limitation - Opacity does not fade, 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>
Run code


+2


source


Like that:



<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>
0


source


You can extend the hover effect with 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;
}
0


source


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


source


This is a bit tricky because you want a nice opacity transition. It would be much easier with display: none

. But we can still work with a transition if you use a combination position: absolute

for hiding elements and opacity for the transition.

Move the switch :hover

from li

to the wholeul 

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 the menu #dropdown

moves off the screen at an absolute position, making it impossible to hover over "invisible" items, so they don't appear when hovering over the white area. However, the first time you rotate an item, you return the dropdown menu with top: auto

, which allows you to hover over it again. The transition will also work.

0


source






More articles:


All Articles