Question

I created a menu. But instead of using a list I used several divs and spans which look like this:

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

With the “cfinclude” I insert two forms which are both inside a div, having the class “format”. Here is the css file for my menu:

#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;

}

I want to change the display of my included forms when hovering over one of the “formsLi” elements. The hover does work, but the last css rule doesn’t change the display of the divs.

Answer 1

You are repeating your selectors. Use this:

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