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>
.icon:hover#navigation {
left: 0;
}
.icon {
left: 0px;
}
#navigation {
position: fixed;
width: 200px;
height: 300px;
background-color: red;
top: 0;
left: -200px;
}
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.