Изменение расположения элемента при наведении указателя мыши на элемент меню

Question

Я создал меню. Но вместо того, чтобы использовать список я использовал несколько дивы и пролеты, которые выглядят следующим образом:

<div id="forms">     
    <span class="formsLi">Einloggen<cfinclude template="login.cfm" /></span>   
    <span class="formsLi">Registrieren<cfinclude template="forms/register.cfm" /></span> 
</div> 

С «cfinclude» вставить две формы, которые как внутри DIV, имеющие «формат» класса. Вот файл CSS для моего меню:

#forms{ 
    background-color: silver;, 
    border: 1px solid black; 
    margin: 0; 
    padding: 0.8em; 

} 

#forms .formsLi{ 
    background-color: orange; 
    margin-left: 10px; 
    padding: 10px; 

} 

#forms .formsLi .format{ 
    border: 1px solid black; 
    display: none; 
    float: left; 
} 

#forms .formsLi:hover{ 
    background-color: black; 
    color: white; 
} 

#forms .formsLi:hover #forms .formsLi .format{ 
    display: block; 

} 

Я хочу, чтобы изменить отображение моих включенных форм при наведении курсора на один из элементов «formsLi». Наведение работает, но последнее правило css не изменяет отображение div.

Answer 1

Вы повторяете свои селекторы. Используйте это:

#forms .formsLi:hover .format{ 
    display: block; 
}