Question

我的下拉菜单在XML中完美运行，而不是HTML。请查看这个小提琴，以获得视觉呈现：http://jsfiddle.net/H8FVE/9/ 如果您将鼠标悬停在更多按钮上，您会看到下拉列表对齐正常。我用于下拉位的代码是：

<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？如果您选择回答：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 {...}

例如，您可以在表示这些规则的div上使用specialdiv类，并在规则中使用.specialdiv代替div。

Working jsFiddle Demo

Answer 2

您忘了将moretopbar声明为id又名#moretopbar

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

2 个答案: