Adjusting height of a-tag to outer td

Question

Hey guys,

I got the following structure:

<td>
   <a>1. menu</a>
   <a>2. menu</a>
   <a>3. menu</a>
   <a>4. menu</a>
</td>

Of course, I have classes assigned to the elements. I am trying to adjust the height of those a elements to the outer td, so that the hover effect will fill from top to the bottom.

See here:

Any idea how I can accomplish that?

Answer 1

What about:

td a {
    display: inline-block;
    height: 100%;
}

You also have to remove padding (top and bottom) from td.

Answer 2

You can change padding for a tags and remove height of td elements.

Answer 3

It would help alot if we could see your current CSS & actual mark up, but my guess from what you are trying to accomplish is that you need to add padding to the top & bottom of the to achieve the look you want.

Can I ask why you are putting it in a table instead of a list? If you where doing a list your code would be something like this:

<div id="custom_menu">
            <ul class="links">
                <li class="first">
                    <a>Link</a>
                </li>
                <li>
                    <a>Link</a>
                </li>
                <li>
                    <a>Link</a>
                </li>
                <li>
                    <a>Link</a>
                </li>
                <li>
                    <a>Link</a>
                </li>
                <li>
                    <a>Link</a>
                </li>
                <li>
                    <a>Link</a>
                </li>
                <li class="last">
                    <a>Link</a>
                </li>
            </ul><!-- end class=links -->
        </div><!-- end id=custom_menu -->

And this would be your CSS:

#custom_menu {
width: 850px;
margin: 0px auto;
padding: 0;
}
.links {
    list-style-type: none;
    margin: 9px auto;
    padding: 4px 0 0 30px;
    height: 23px;
    }
    .links li {
        display: inline !important;
        }
        .links em {
                display: none;
                background-color: red;
            height: 55px;
            font-size: .7em;
            margin: 0 0 0 -50px;
            padding: 3px 10px 10px 3px;
            position: absolute;
            text-align: center;
            width: 107px;
            z-index: 30;
            }
            .links .last em {
                margin: 0 0 0 -75px;
                }