CODEWITHSUNDEEP
htmlcss
Mortuux
Mortuux

Reputation: 59

How To Make An Entire td A Link

Before asking this question I tried researching and trying out the given results but to no avail could I make it so as soon as the cursor enters the td that you could click the link inside it. I have done it once before but can not remember or figure it out.

Here's the HTML: 

<table>
<tr>

    <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="#BE2625">
<a href="#">
Home
</a>
</font>
</li></ul>
    </td>          

    <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="black">
<a href="">
Menu
</a>
</font>
</li></ul>
    </td>



        <td class="nav" align="center" valign="center" width="125" height="35">
<ul class="nav"><li class="nav">
<font size="4" color="black">
<a href="">
Info
</a>
</font>
</li></ul>
    </td>  

</tr>
</table>

Here's the CSS:

ul.nav{
    text-decoration: none;
    display: table-cell;
        padding: 0px;
        list-style: ;
    color: black;
    }

ul li.nav{
    float: left;
        width: 100%;
        text-align: center;
    text-decoration: none;
    list-style-type: none;
    color: black;
    padding: 0px;
     }

ul li.nav:hover{
    float: left;
    text-align: center;
    text-decoration: none;
    list-style-type: none;
    text-valign: bottom;
    color: black;
     }

ul li a{
    margin: 0px;
    display: table;
        padding: 5px 0px 5px 0px;
    text-decoration: none ;
    border: 1px solid;
    border-radius: 3px;
    border-color: transparent; 
    color: black;
    width: 100%;
    height: 100%;

    }

ul li a.nav:hover{
    text-align: center;
    background:transparent;
    color: black;
    width: 100%;
    height: 100%;
    display: table;
    }

ul li ul.nav{
    width: 25%;
    display: none ;
    color: black;
    }

ul li.nav:hover ul{
    float: center;
    opacity: .87;
    position: absolute;
        display: block; /* display the dropdown */
    color: black;

}

td.nav {
    border: 5px solid;
    border-radius: 100px;
    border-color: #FAEBD7; 
    color: black;
    background-color: #FAEBD7;
}

td a.nav {
    width: 100%;
    height: 100%;
    display: table;
}

td a.nav: hover{
    width: 100%;
    height: 100%;
    display: table;
}

td.nav:hover{
    color: black;    
        background: #ed1a3b;
    border: 5px solid;
    border-radius: 100px;
    border-color: #FAEBD7; 
    }

Here's the jsfiddle:

http://jsfiddle.net/9kat4ztL/1/

Thank you for your help ahead of time, and if the question is not clear enough please let me know what is wrong and I'll make changes.

Upvotes: 0

Views: 702

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

Make the menu with less html and css, also add styles for <a> tag instead of <li>

ul.nav {
  text-decoration: none;
  padding: 0px;
  list-style: none;
  color: black;
}
ul.nav li{
  display: inline-block;
  text-align: center;
  padding: 0px;
}
ul.nav li a {
  margin: 0px;
  text-decoration: none;
  border: 5px solid;
  border-color: transparent;
  color: black;
  background-color: #FAEBD7;
  display: block;
  border-radius: 100px;
  padding: 13px 44px;
}
ul.nav li a:hover {
  text-align: center;
  color: black;
  background: #ed1a3b;
  border: 5px solid;
  border-color: #FAEBD7;
}
<ul class="nav">
  <li>
    <a href="#">Home</a>
  </li>
  <li>
    <a href="">Menu</a>
  </li>
  <li>
    <a href="">Info</a>
  </li>
</ul>

Upvotes: 1

knitevision
knitevision

Reputation: 3143

Well, not mentioning your awful markup and inappropriate use of it, here's a way:

JSFiddle

The idea is to set position: relative for td and absolutely position a inside of it with top: 0;, left: 0;, display: block

Upvotes: 2

Related Questions