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 中为我工作。