Css悬停链接显示表

Question

因此，当我将鼠标悬停在链接上时，我会尝试制作一个下拉菜单。表格显示在链接下方。我不明白为什么它不会工作。查看小提琴链接。

固定链接 http://jsfiddle.net/ThobiasN/Pt3db/

Html代码示例：

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

Css代码示例：

td.dropdown
{
    display:none;
}

a.nav:hover > table
{
    display:block;
}

Answer 1

因为该表不是链接的子项。 CSS中的符号>等同于“直接孩子”

尝试将表格放在链接中。

Answer 2

<table>是链接元素的兄弟。使用+来操作兄弟姐妹。

a.nav + table {
  display: none;

}
a.nav:hover + table {
  display: block;
}

Answer 3

这是正确的方法， CSS ：

a.nav + table tr td.dropdown
{
display:none;
}

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

你需要隐藏和显示相同的元素，如果你隐藏一个表，不显示TD，反之亦然

或者，显示和隐藏表格而不是TD， CSS ：

a.nav + table 
{
display:none;
}

a.nav:hover + table 
{
display:block;
}

要记住的另一件事是，+指的是兄弟元素，＆gt;指直接孩子

Answer 4

a.nav：hover＆gt; table表示表应该在a.nav中。首先不要在这里使用表格，更好地使用ul并将其放在a.nav

中

<a class='nav' href='#'>Hover me
  <ul>
    <li>Show me</li>
  </ul>
</a>

Answer 5

我认为最后你需要使用一些Javascript代码来实现这一点，但你做错了是这样的：

• > simbol是直接孩子
• 您想为display: none元素设置table，而不是td

解决方案：

• 更改此>符号系列：+以获取下一个元素
• 稍微改变你的css

HTML

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

CSS

table{
    display:none;
}

a.nav:hover + table{
    display:block;
}

的jsfiddle

http://jsfiddle.net/Pt3db/5/

加上建议

• 使用无序列表代替table（表格数据表）
• 你将无法点击subnav元素，这就是为什么我认为你需要一些Javascript
• 你可以使用很多很好的导航插件，至少你正在学习，不要重新发明轮子;）

Answer 6

使用css Fiddle

似乎无论哪种方式都有效，但这是我喜欢的方式 即使它不是css：

$('.nav').hover(function () {
    $('table').css('display', 'block');
});

table{    
    display:none;
}

Answer 7

HTML代码

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

CSS代码

table.dropdown
{
    display:none;
}
a.nav:hover + table
{
    display:block;
    color: green;
}