При наведении мышки изменить цветовые значения потомков
 

При наведении мышкой, чтобы background у li стал синим, а вложенные в li теги "a", "р" и стрелочка сделанная на css стали белыми, отвели мышку вернули всё в исходное состояние.

На css изменить цвет фона для li при помощи hover лёгкая задача, а перекрасить вложения - это я уже не смогу сделать сам.

Разметка:

<ul class="breadcrumbs">
  <li>
    <a href="index.html">Главная</a>
     <p>
        Далеко-далеко за&nbsp;словесными горами в&nbsp;стране, 
        гласных и&nbsp;согласных живут рыбные тексты.
     </p>
  </li>

  <li>
     <a href="index.html">Главная</a>
      <p>
        Далеко-далеко за&nbsp;словесными горами в&nbsp;стране, 
        гласных и&nbsp;согласных живут рыбные тексты.
     </p>
  </li>
<li>
     <a href="index.html">Главная</a>
      <p>
        Далеко-далеко за&nbsp;словесными горами в&nbsp;стране, 
        гласных и&nbsp;согласных живут рыбные тексты.
     </p>
  </li>
</ul>

Less - Css:

.sidenav {
    .nav_top_menu_item {
        height: 89px;
        background: #F5F8FC;
        color: @body_font;
        font-size: 18px;
        font-weight: bold;
        font-style: normal;
        line-height: 89px;
        padding-left: 17px;
        font-weight: bold;
        display: block;
        min-width: 300px;
        // text-decoration: line-through;
        &:before {
            position: absolute;
            content: '';
            display: block;
            height: 9px;
            width: 9px;
            border: 2px solid #000;
            border-left: none;
            border-bottom: none;
            transform: rotate(135deg);
            top: 38px;
            left: 340px;
        }
    }
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    k top: 0;
    left: 0;
    background: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    a {
        font-size: 19px;
        font-weight: bold;
        font-style: normal;
        line-height: inherit;
        padding: 8px 8px 8px 13px;
        text-decoration: none;
        color: @link_color_dark;
        display: block;
        transition: 0.5s;
        letter-spacing: 1px;
    }
}

.breadcrumbs {
    margin-top: 25px;
    li:hover {
        background: @link_color_dark;
    }
    p {
        width: 300px;
        padding-left: 13px;
        margin: 6px 0 17px 0;
        line-height: 1.2;
    }
    a {
        position: relative;
    }
    a:after {
        position: absolute;
        content: '';
        display: block;
        height: 9px;
        width: 9px;
        border: 2px solid #000;
        border-left: none;
        border-bottom: none;
        transform: rotate(45deg);
        top: 15px;
        left: 340px;
    }
}

.sidenav здесь является родителем для .breadcrumbs

Вложения не многим сложнее... ;)

li:hover {}
li:hover > p {}
li:hover > a {}

ksa,
ты сделал это на css и это лучшее решение. В контексте своей задачи, сделал в итоге :

li:hover * {
      color: #fff;
   }

так вышло чуток лаконичнее. Списибки, что показал и сподобил меня на это!