0

さて、最近質問を投稿しましたが、別の問題に遭遇しました。

リンクの上にカーソルを合わせると表が表示されるナビゲーションメニューを作成しようとしています。問題は、私のコードでは、リンクがテーブルの 2 つの div にパックされており、表示しようとしているテーブルもこのシバン全体の中にあることです。お見せするためにサンプルコードを作りました

フィドル リンク: http://jsfiddle.net/ThobiasN/FJksb/24/

HTML コード:

<div>
    <div>
        <table>
            <tr>
                <td><a class='nav' href='#'>Hover me</a></td>
            </tr>
            <tr>
                <table>
                    <tr>
                        <td class='dropdown'><p>Show me</p></td>
                    </tr>
                </table>
            </tr>
        </table>
    </div>
</div>

CSS コード:

div table tr td.dropdown
{
    display:none;
}

div table tr td a.nav:hover + div table tr td.dropdown
{
    display:block;
}
4

1 に答える 1

0

JavaScript を使用せずに CSS に固執している理由はありますか? JavaScript を使用すると、おそらくこれがはるかに簡単になります。

ただし、純粋に CSS で行いたい場合は、ユーザーがホバーしなければならないアイテム内にテーブルを配置する必要があると思います。したがって、質問にあるものの代わりに、次のような構造を使用してください。

<div>
    <div>
        <table>
            <tr>
                <td>
                    <a class='nav' href='#'>Hover me
                        <table>
                            <tr>
                                <td class='dropdown'><p>Show me</p></td>
                            </tr>
                        </table>
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>

次に、必要に<a>応じてリンク テキストをタグ内に配置して、タグを適切にスタイルする<span>必要があります。これにより、リンクのように見えるようにすることができます。

実際にメニューを機能させる CSS は次のようになります。

.nav:link .dropdown {
    display: none;
}

.nav:hover .dropdown, .nav:active .dropdown {
    display: block;
}

これがブラウザに指示しているのはdropdown、アクティブまたはホバーされたnavリンク内に分類されたテーブルを表示し、アクティブまたはホバーされていないときに非表示にすることだけです。

ここに例を作成しました。ただし、<div>s の代わりにsを使用したことに注意してください。<table><table><div>menucontentnavdropdown

お役に立てれば。幸運を。

于 2013-02-11T19:01:35.153 に答える