0

好的，所以我最近发布了一个问题，但遇到了另一个问题。

我正在尝试制作一个导航菜单，您将鼠标悬停在链接上并显示一个表格。现在的问题是，在我的代码中，链接包含在一个表格的两个 div 中，而我要显示的表格也在整个 shebang 中。我制作了一个示例代码向您展示

小提琴链接：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

你有什么理由坚持使用 CSS 而不是使用 JavaScript？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 而不是<table>s，尽管您可以将您<table>的放在里面，<div>而我分别使用了类名menuandcontent而不是navand dropdown。

希望这可以帮助。祝你好运。

于 2013-02-11T19:01:35.153 回答