Css IE7中的悬停下拉菜单问题

我对IE7中的悬停菜单有一个问题，我正在开发一个网站。它在兼容浏览器（如Firefox）上运行良好

这是链接：

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>

需要帮忙吗？很抱歉，如果类似的情况已经在其他地方解决了，但我找不到合适的解决方案

致以最良好的祝愿，

---

gas

只需在菜单中的

|

后面添加一个

，这样嵌入式ul将被迫转到新行

---

在IE7中对我有效。

我在浏览器窗口中看不到问题。请描述您希望更改/修复的内容。如果我不清楚，请原谅。因此，右框顶部的菜单有一个子菜单，在悬停时显示，在FF上运行良好，但在IE7中，菜单项显示在同一行，而不是下面，就像它应该显示的那样。另外，IE7的底部似乎有点被剪掉了。这个网站可能会有帮助：太好了，谢谢，它解决了这个问题！我希望我可以复制的br标签只为顶级菜单在wordpress虽然。。。您知道如何处理wp_列表_类别，只为顶级项目添加br标记，而不为底层项目添加br标记吗？还是使用jQuery更好？您成功地在顶级菜单中添加了“|”字符，不是吗？你不能用同样的方法添加br吗？它仍然处于html+css设计阶段。。。无论如何，当我要将设计转移到WP时，我会检查一下法典。我强烈建议您避免在导航中使用

|

字符。它不是语义元素，也不是用于格式/布局细节。它仅仅是一个ascii字符，用文本阅读器把人们弄糊涂了。如果更改排版，也会导致格式问题。此外，出于验证原因，请务必像这样关闭BR标签。

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