html - 列表使用 XML 而不是 HTML，为什么？

Question

我的下拉菜单在 XML 中运行完美，在 HTML 中运行不佳。请查看此 fiddle 以获得视觉演示:http://jsfiddle.net/H8FVE/9/ 如果将鼠标悬停在 MORE 按钮上，您会看到下拉菜单对齐良好。我用于下拉位的代码是:

<moretopbar>
<ul>
    <li class="mgames"><a href="" style="border-bottom:9px solid #e34328">Games</a></li>
    <li class="mliterature"><a href="" style="border-bottom:9px solid #2c8f83">Literature</a></li>
    <li class="marts"><a href="" style="border-bottom:9px solid #cc226a">Arts</a></li>
    <li class="mcontact" style="background:none;"><a href="" style="border-bottom:9px solid #9395aa">Contact</a></li>
</ul>
</moretopbar>

还有一些 CSS:

#mega div moretopbar {
    clear: both;
    float: left;
    position: relative;
    margin-left:1px;
    margin-right:1px;
    width: 495px;
    height: 74px;
    background-image: url(images/morebgwide.png);
    background-size:495px 74px;
    background-repeat:no-repeat;
}

我试图改变 <moretopbar>至 <div id="moretopbar">但它完全搞砸了下拉菜单。

这是为什么呢？我应该如何修复它以便我只使用 HTML？如果您选择回答，请随时更新 fiddle :http://jsfiddle.net/H8FVE/9/

在您选择回答之前，我应该注意两件事。首先，我不熟悉 XML，上面是一个随机为我工作的编码错误(有人指出它是 XML)，其次，我不应该这样使用它有什么理由吗？例如兼容性问题...

Answer 1

您的 HTML 完全无效。 您打开了很多 div 而不是将它们全部关闭。这就是为什么当您再引入一个 div 时您的设计就会中断。

请修复您的 HTML。您可以使用 W3c's Online Validator查看标记的问题。养成编写有效 HTML 的习惯，否则会出现这样的“奇怪”错误。

在this fiddle ，我做了以下更改:

• 将 ID 移至您的 <ul>并摆脱了 <moretopbar> :

  <ul id="moretopbar">
  

• 将选择器更改为:#mega div #moretopbar .

它“有效”是因为 ID 现在位于 ul 上, 不是 div - 正如我已经提到的，由于缺少结束标记，浏览器无法真正识别哪个 div 是哪个。除非你解决这个问题，否则你很可能会在当前的 div 中看到其他奇怪的错误。

---

编辑:此外，以下 CSS 规则需要比简单地说 div 更具体。 :

#mega div {...}
#mega li.dif:hover div {...}

例如，您可以使用 specialdiv div 上的类你指的是这些规则，并使用 .specialdiv而不是 div在规则中。

Working jsFiddle Demo