css hover élément pour montrer à l'enfant, comment puis-je garder le hover css sur le parent lorsque je survol de l'enfant?

J'ai un <ul> avec plusieurs <li> éléments. À l'intérieur de la <li> élément, il est un grand <div> ce qui est caché par défaut. Quand je survole le <li> son arrière-plan change de couleur tout comme la bordure du bas ainsi que l'affichage de la <div>. C'est le comportement attendu. Remarque, je suis en utilisant le css et pas le javascript pour le hover effet. .menuItem:hover .menuBody { display:block;}. Mon problème est que lorsque je survolez le montre maintenant <div> son parent, le <li> dans ce cas, il perd du survol du style. Comment peut-on forcer les parents à garder le hover style quand j'ai passez la souris sur la <div>? De base en html pour le menu, c'est comme cela. Toute aide ou des conseils est évidemment apprécié.

<ul>
    <li class="menuItem">
        <a href="#">MenuItem</a>
        <div class="menuBody></div>
    </li>
</ul>
Un violon s'il vous plaît, avec votre code.

OriginalL'auteur Hcabnettek | 2013-08-01