Hover Проблемы с выпадающим меню в IE7

Question

У меня проблема с закрытым меню в IE7, на сайте, который я сейчас разрабатываю. Он отлично работает на совместимом браузере (например, Firefox).

Это ссылка: http://kaplareva.com/elet-ter-WP/

HTML выглядит так:

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

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

Любая помощь, пожалуйста? Извините, если подобный случай уже решен где-то еще, но я не смог найти подходящее решение.

С наилучшими пожеланиями, газ

Answer 1

Просто добавьте <br> за | в вашем меню, чтобы встроенный ul был вынужден перейти на новую строку.

У меня работает в IE7.