Комбинированных парения не работают

Question

<div class="knoppen"> 
       <a class="test">HOVER?!</a> 
       <span class="icon"><a><i class="fa fa-home"></i></a></span> 
       <span class="icon"><i class="fa fa-book"></i></span> 
       <span class="icon"><i class="fa fa-euro"></i></span> 
      </div> 

     <div class="sidecontent"> 
    <ul> 
     <li><span class="test"><i class="fa fa-bars"></i></span><a href="formulieren.html">Formulieren</a></li> 
     <li><span class="test"><i class="fa fa-share"></i></span>Contactpersonen</li> 
     <li><span class="test"><i class="fa fa-pencil"></i></span>Adressen</li> 
    </ul> 
     </div> 

И мой CSS:

div.sidecontent { 
     margin-left: -30px; 
     display: none; 
    } 

a.test:hover + div.sidecontent 
{ 
    color: red; 
    display: block; 
    } 

Кто-нибудь знает, почему мои комбинированные парения не работает в этой ситуации? На моей тестовой странице это работает, но когда я пытаюсь заставить его работать здесь, он просто не делает: я пробовал все, кроме рабочих результатов;

Answer 1

Похоже, ваш a.test не сосед div.sidecontent, а селектор CSS «+» выбирает элементы, которые размещаются только сразу после тега