IE 7 的 CSS 下拉问题

Question

我最近通过 wordpress 构建了这个网站，但似乎在使用 Internet Explorer 7 时遇到了一些对齐问题。

基本上他们在右边出现了大约 20 像素左右，想知道有什么方法可以解决这个问题？这让我困惑了一段时间，我觉得我的想法正在慢慢耗尽。

这是链接：

http://alleanza.co.uk

需要截图吗？如果是这样，我可以在今晚晚些时候从客户那里发布，但它只是 IE 7！？

我对列表的 PHP 和 Html 结构是这样的：

<ul id="nav" class="clearfloat">
<li style="padding:10px 10px 0px 10px; height:20px; display:block;"><a href="http://www.alleanza.co.uk">Alleanza</a></li>
<div id="navoption"><ul><?php wp_list_pages('title_li='); ?></li></ul></div>
</ul>

这是正确的结构吗？感谢所有帮助..

Answer 1

您在顶级 ul 菜单项中嵌套了一个 div，这可能是破坏您在 IE7 中的设计的原因，令人惊讶的是它甚至可以在其他浏览器中运行：

<ul class="clearfloat" id="nav">
    <li>Alleanza</li>
    <div id="navoption"> <ul> ... </ul> </div>
</ul>

列表项必须嵌套在您的菜单列表中。

因此，将 div 包装在列表项中，它应该可以工作：

<ul id="nav" class="clearfloat">
    <li style="padding:10px 10px 0px 10px; height:20px; display:block;"><a href="http://www.alleanza.co.uk">Alleanza</a></li>
    <li><div id="navoption"><ul><?php wp_list_pages('title_li='); ?></li></ul></div></li>
</ul>

注意：请注意，您使用的是 wordpress，实际上您可以在菜单的“自定义链接”选项中创建“Alleanza”链接，因此您无需对其进行硬编码。

文档：http://codex.wordpress.org/Appearance_Menus_Screen