Регулировка высоты тэга до внешнего тд

Question

Я получил следующую структуру:

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

Конечно, у меня есть классы, назначенные элементам.Я пытаюсь отрегулировать высоту этих элементов для внешнего тд, чтобы эффект наведения заполнял сверху вниз.

Смотрите здесь:

Есть идеи, как мне этого добиться?

Answer 1

Было бы очень полезно, если бы мы могли видеть ваш текущий CSS и текущую разметку, но я думаю, что вы пытаетесь сделать то, что вам нужно добавить отступы сверху и снизу, чтобы получить желаемый вид.

Могу я спросить, почему вы кладете это в таблицу вместо списка? Если вы делаете список, ваш код будет выглядеть примерно так:

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

И это будет ваш 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;
                }

Answer 2

Вы можете изменить padding для a тегов и удалить height из td элементов.

Answer 3

А как же:

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

Вы также должны удалить отступы (верх и низ) из td.