Hover Problèmes du menu déroulant dans IE7

Question

J'ai un problème avec un menu survolé dans IE7, dans un site que je développe actuellement. Cela fonctionne très bien sur un navigateur compatible (par exemple Firefox).

Voici le lien: http://kaplareva.com/elet-ter-WP/

Le code HTML ressemble à ceci:

<div id ="menu-maincontent"> 
<h2>Társas kapcsolatok</h2> 
<ul> 
<li><a href="#">Egyedül</a> | 
<ul> 
<li><a href="#">Szingli</a> | </li> 
<li><a href="#">Gyász</a> | </li> 
<li><a href="#">Egyedülálló szülő</a></li> 
</ul> 
</li> 
<li><a href="#">Párkapcsolat</a> | 
<ul> 
<li><a href="#">Párterápia</a> | </li> 
<li><a href="#">Párkapcsolat zavarai</a></li> 
</ul> 
</li> 
<li><a href="#">Család</a> | 
<ul> 
<li><a href="#">Családterápia</a></li> 
</ul> 
</li> 
<li><a href="#">Szülő-gyerek</a> 
<ul> 
<li><a href="#">Anya-gyerek kapcsolat</a> | </li> 
<li><a href="#">Apával való kapcsolat</a></li> 
</ul> 
</li> 
</ul> 
</div> 

Le CSS:

#menu-maincontent ul li { 
    float: left; 
    display: block; 
    margin-right: 5px; 
    font-family: 'GiacomoMedium',Arial,sans-serif; 
    font-weight: normal; 
    } 

#menu-maincontent ul li ul { 
    display: none; 
    font-size: 10pt; 
    height: 0; 
    overflow: hidden; 
    text-transform: none; 
    background-color: white; 
} 

#menu-maincontent ul li:hover > ul { 
    display: block; 
    height: 24px; 
    margin-bottom: 10px; 
    margin-top: 5px; 
    overflow-y: visible; 
    position: absolute; 
} 

Toute aide s'il vous plaît? Désolé si un cas similaire est déjà résolu ailleurs, mais je n'ai pas trouvé de solution appropriée.

Cordialement, gaz

Answer 1

il suffit d'ajouter un <br> derrière le | dans votre menu, de sorte que le ul intégré sera forcé d'aller à la nouvelle ligne.

Fonctionne pour moi dans IE7.