Hover don't works as expected - html

Question

The problem is that when I hover on li, hover do not work, with the first one it works but hover area is not the same as div's size.
This is a sidebar that works by checkbox without javascript.
here is HTML
<input type="checkbox" id="sidebartoggler">
<div id="page-wrap">
<label for="sidebartoggler" id="toggle">☰</label>
<div id="sidebar">
<ul class="elements">
<li>Str. Glowna</li>
<li>Wyb. przedmiotu</li>
</ul>
</div>
<div class="page-content">
and CSS
.page-content
{
position: relative;
z-index: 0;
transition: padding-left 0.5s;
}
#chose
{
font-size: 40px;
text-align: center;
margin: 5% 0 5% 0;
}
#sidebar
{
position: fixed;
left:-190px;
right: 0;
top: 0px;
bottom:0px;
width: 170px;
padding: 10px;
background: #333;
transition: left 0.5s;
display: inline-block;
}
#toggle
{
position: fixed;
left:20px;
top: 15px;
font-size: 30px;
transition: left 0.5s;
}
#sidebartoggler
{
display: none;
}
#sidebartoggler:checked + #page-wrap #sidebar
{
left:0px;
}
#sidebartoggler:checked + #page-wrap #toggle
{
left:200px;
}
#sidebartoggler:checked + #page-wrap .page-content
{
padding-left: 180px;
}
.page-content
{
padding-left: 0px;
}
#sidebar ul
{
font-size: 15px;
list-style: none;
list-style-position: inside;
width: 170px;
margin: 20px 0 0 -40px;
text-align: center;
}
#sidebar ul > li
{
padding: 10px 0;
margin: 5px 0 0 0;
background-color: #444;
display: block;
}
#sidebar ul > li:hover
{
background-color: #555
}
Here you can see the full code: https://jsfiddle.net/2hnLyjw4/1/
Sorry for my english.
Thanks for Your help!

Answer 1

The problem is you are using padding-left on .page-content; this is causing the contents to shift to the right as desired, but the div is partially sitting on top of your menu and interfering with the hover events.
Change it to use margin-left:
.page-content {
position: relative;
z-index: 0;
transition: margin-left 0.5s;
}
...
#sidebartoggler:checked + #page-wrap .page-content {
margin-left: 180px;
}
.page-content {
margin-left: 0px;
}