1

我的下拉菜单在 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），其次，我为什么不应该这样使用它有什么原因吗？例如兼容性问题...

4

2 回答 2

6

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

请修复您的 HTML。您可以使用W3c 的在线验证器来查看您的标记问题。让编写有效的 HTML 成为您的习惯，否则会出现这样的“奇怪”错误。

在这个小提琴中，我做了以下更改：

  • Moved the ID to your <ul> and got rid of <moretopbar>:

    <ul id="moretopbar">

  • Changed the selector to: #mega div #moretopbar.

It "works" because the ID is now on an ul, not a div - as I already mentioned, the browser cannot really identify which div is which because of the lack of closing tags. Unless you fix this problem you are very very likely to see other strange bugs with your current divs.

Edit: Also the following CSS rules need to be more specific than simply saying div:

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

For example you can use a specialdiv class on the div you mean these rules for, and use .specialdiv instead of div in the rules.

Working jsFiddle Demo

于 2012-08-15T23:06:19.187 回答
0

您忘记将 moretopbar 声明为 id aka #moretopbar

于 2012-08-15T22:49:13.883 回答