CSS ONLY - how to slide out menu on button hover? - css

Question

I want the menu to slide out when I hover over a button. Somehow I it only works when I add the hover effect to the menu itself, not to a button. All I could find online was the same (hover effect was attached to the menu that should slide out, not a button). How can I implement that?
jsfiddle: https://jsfiddle.net/codingcodingcoding/tuhug8x8/
html:
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
css:
.icon:hover#navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}

Answer 1

html
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
css:
.icon:hover + #navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
Here, I have added just + selector olny.

Answer 2

You may use the + or ~ CSS selector if you want to keep your current HTML structure like this :
.icon:hover + #navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<span class="glyphicon glyphicon-home icon" style="font-size:40px;z-index:2;"> </span>
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
You can read more about

Answer 3

#navigation should be a child element of the icon container (which in your case is the span element) in order to be able to select it on hover. You just have to move the closing span tag as shown below.
(I used an image instead of the icon here n the snippet, but in the fiddle, you'll see the icon: https://jsfiddle.net/qLy4g8sL/1/ )
.icon {
left: 0px;
}
#navigation {
position: absolute;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
.icon:hover #navigation {
left: 0;
}
<span class="glyphicon glyphicon-home icon" style="font-size:40px;"><img src="http://placehold.it/50x50">
<nav id="navigation">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
</span>