1

私のドロップダウン メニューは、HTML ではなく XML で完璧に機能します。ビジュアル プレゼンテーションについては、このフィドルを参照してください: 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 のみを使用するように修正するにはどうすればよいですか? 回答することを選択した場合は、自由にフィドルを更新してください: http://jsfiddle.net/H8FVE/9/

回答を選択する前に、2 つの点に注意する必要があります。第一に、私は XML に精通していません。上記は私にとってランダムに機能するコーディングの間違いです (そして、誰かが XML であると指摘しました)。第二に、このように使用してはいけない理由はありますか? たとえば、互換性の問題...

4

2 に答える 2

6

あなたの HTML は完全に無効です。多くの div を開いていますが、すべてを閉じているわけではありません。そのため、もう 1 つ div を導入するとデザインが壊れます。

HTML を修正してください。W3c の Online Validatorを使用して、マークアップの問題を確認できます。有効な HTML を書く習慣をつけてください。そうしないと、このような「奇妙な」エラーが発生することが予想されます。

このフィドルでは、次の変更を加えました。

  • IDをあなたに移動し、削除<ul>しました<moretopbar>:

    <ul id="moretopbar">

  • セレクターを次のように変更しました: #mega div #moretopbar。

ulID がではなくにあるため、「機能」します。div既に述べたように、ブラウザは終了タグがないため、どの div がどれであるかを実際に識別できません。この問題を修正しない限り、現在の div で他の奇妙なバグが発生する可能性が非常に高くなります。

編集:また、次の CSS ルールは、単に言うよりも具体的にする必要がありますdiv。

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

たとえば、specialdivこれらのルールを意味する div でクラスを使用し、ルール.specialdivの代わりに使用できdivます。

動作中のjsFiddleデモ

于 2012-08-15T23:06:19.187 に答える
0

moretopbar を #moretopbar という ID として宣言するのを忘れました

于 2012-08-15T22:49:13.883 に答える