CODEWITHSUNDEEP
htmlcss
Thobias Nordgaard
Thobias Nordgaard

Reputation: 295

Css hovering link show table

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;
}

Upvotes: 0

Views: 3638

Answers (7)

Simon Dragsb&#230;k
Simon Dragsb&#230;k

Reputation: 2399

Working with css Fiddle

It seems to work either way but here is the way that I prefer even though it's not css:

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

table{    
    display:none;
}

Upvotes: 1

Usenevi
Usenevi

Reputation: 1

HTML Code

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

CSS Code

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

Upvotes: 0

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

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 ;)

Upvotes: 2

Solorzano Jose
Solorzano Jose

Reputation: 632

This is the proper way to do it, CSS:

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

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

You need to hide and show the same element, if you hide a table, don't show a TD, and vice versa

Alternatively, show and hide table instead of TD, CSS: 

a.nav + table 
{
display:none;
}

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

One more thing to keep in mind, + refers to sibling elements, > refers to direct child

Upvotes: 2

GTM
GTM

Reputation: 634

<table> is a sibling to link element. Use + for operating over the sibling.

a.nav + table {
  display: none;

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

Upvotes: 3

AnilkaBobo
AnilkaBobo

Reputation: 260

a.nav:hover > table means that table should be inside a.nav. First of all don't use table here, use ul better and put it inside a.nav

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

Upvotes: 2

HCS-Support
HCS-Support

Reputation: 116

Because the table isn't a child of the link. The sign > in CSS is equivalent to "direct child of"

Try to put the table inside of the link.

Upvotes: 3

Related Questions