Установить цвет фона элемента Li, со списком в стиле установлен ни

Question

<aside class="-menu"> 
    <ul class="-menu-ul"> 
     <li><div class="-menu-items">Phones</div><div class="-menu-count">15</div></li> 
    </ul> 
</aside> 

DEMO

Я хотел бы установить цвет фона Li элемента при наведении курсора со структурой выше.

Я использую этот стиль, чтобы убрать вещи, удалить список маркеров и установить цвет фона при наведении курсора мыши

.-menu{ 
    box-sizing: border-box; 
    width: 20%; 
    background-color: aliceblue; 
    display: inline-block; 
    padding: 30px; 
} 
.-menu-items{ 
    float: left; 
} 
.-menu-count{ 
    float: right; 
} 
ul.-menu-ul{ 
    list-style:none; 
} 
ul.-menu-ul li{ 
    clear: both; 
    line-height: 30px; 
    padding: 0 10px; 
} 
.-menu-ul li:hover{ 
background-color: #cdd4c4; 
} 

К сожалению, это не работает. Любая идея почему?

Answer 1

Высота li составляет 0, потому что это дети плавали, так что вам нужно, чтобы очистить поплавок для парения появляться.

.scenes-menu { 
 
    box-sizing: border-box; 
 
    width: 20%; 
 
    background-color: aliceblue; 
 
    display: inline-block; 
 
    padding: 30px; 
 
} 
 

 
.scenes-menu-items { 
 
    float: left; 
 
} 
 

 
.scenes-menu-count { 
 
    float: right; 
 
} 
 

 
ul.scenes-menu-ul { 
 
    list-style: none; 
 
} 
 

 
ul.scenes-menu-ul li { 
 
    clear: both; 
 
    line-height: 30px; 
 
    padding: 0 10px; 
 
    overflow: hidden; 
 
} 
 

 
.scenes-menu-ul li:hover { 
 
    background-color: #cdd4c4; 
 
}

<aside class="scenes-menu"> 
 
    <ul class="scenes-menu-ul"> 
 
    <li> 
 
     <div class="scenes-menu-items">Phones</div> 
 
     <div class="scenes-menu-count">15</div> 
 
    </li> 
 
    </ul> 
 
</aside>

Answer 2

Когда вы плаваете divs, они удаляются из потока документов, а <li> рушится и действует так, как будто у него нет контента, в котором вы применили правило зависания. Простым способом восстановления поведения наведения является добавление overflow: auto в ваше правило <li>.

codepen example