Наведение не работает должным образом

Question

Проблема в том, что когда я наводил курсор на li, зависание не срабатывает, а первое работает, но область зависания не совпадает с размером div.

Это боковая панель, которая работает с помощью флажка без javascript.

здесь 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"> 

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

Здесь вы можете увидеть полный код: https://jsfiddle.net/2hnLyjw4/1/ Извините за мой английский. Спасибо за помощь!

Answer 1

Проблема в том, что вы используете padding-left по телефону .page-content; это приводит к смещению содержимого вправо по желанию, но div частично находится поверх вашего меню и мешает событиям наведения.

Изменить его использовать 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; 
}