Question

So I am trying to make a dropdown menu where when hovering a link. A table is shown underneath the link. I don’t understand why it wont work. Check out the fiddle link.

FIXED LINK
http://jsfiddle.net/ThobiasN/Pt3db/

Html code example:

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

Css code example:

td.dropdown
{
    display:none;
}

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

Answer 1

I think at the end you would need to use some Javascript code to achieve that, but what you are doing wrong is this:

• > simbol is for direct child
• You want to set display: none for the table element, not the td

Solution:

• change the > symbold for this one: + to get the next element
• change a little bit your 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/

Plus advices

• Use an unordered list instead table (table for tabular data)
• You wouldn’t be able to click on the subnav elements, so that’s why I think you would need some Javascript
• Out there are a lot of good navigation plugins that you can use, don’t reinvent the wheel at least you are learning 😉