Display when applying Hover via CSS

Question

I want, that when I hover over the li, to div companyMenusEsqhover stay as display:block. I can do this in Jquery, but I want to do as much as I can via CSS.

I have the HTML:

<ul>
    <li>
        <h3>Apresentação</h3>
        <div style="display:none" class="empresaMenusEsqHover"></div>
    </li>
    <li>
        <h3>Perfil da Empresa</h3>
        <div style="display:none" class="empresaMenusEsqHover"></div>

    </li>
    <li>
        <h3>Histórico</h3>
        <div style="display:none" class="empresaMenusEsqHover"></div>
    </li>
    <li>
        <h3>Mercado de Atuação</h3>
        <div style="display:none" class="empresaMenusEsqHover"></div>
    </li>
</ul>

CSS:

.empresaMenusEsq{
    width: 228px;
    height: 145px;
    padding-left: 10px;
    padding-top: 15px;
    background-color: white;
}
.empresaMenusEsq li h3{
    font-family: "Open-Sans-SemiBold";
    font-size: 15px;
    color: #333333;
    margin-bottom: 10px;
}
.empresaMenusEsq li:hover{display: block;}
.empresaMenusEsqHover{
    background-image: url("../imagens/empresaMenusEsq.png");
    background-repeat: no-repeat;
    position: absolute;
    width: 248px;
    height: 29px;
}

Answer 1

You have the order changed, it must be li:hover .empresaMenusEsqHover and not .empresaMenusEsqHover li:hover, and has to override with !important once it applied the display: none directly in the element.

li:hover .empresaMenusEsqHover  {
    display: block !important;
}

jsFiddle

On the left you have relatives, on the right you have descendants. So the last on the right you should be the div with the class empresaMenusEsqHover, and the :hover is made about the li visible. The important thing here is to use the !important.

Or rather, if you can take the diplay: none; of HTML and put:

li .empresaMenusEsqHover  {
    display: none;
}

to hide, and the code above to the :hover. If you use only CSS as I suggest here, you can take the !important. If you cannot change the HTML, you must use it.