将a-tag的高度调整到外部td

Question

我有以下结构：

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

当然，我有分配给元素的类。我试图将这些元素的高度调整到外部td，这样悬停效果将从顶部到底部填充。

见这里：

知道我怎么能做到这一点吗？

Answer 1

如果我们能够看到您当前的CSS＆amp;实际标记，但我想你要完成的是你需要在顶部和底部添加填充。底部实现你想要的外观。

我可以问你为什么把它放在桌子而不是列表中？如果您在列表中，您的代码将是这样的：

<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

怎么样：

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

您还必须从td删除填充（顶部和底部）。

Answer 3

您可以更改padding代码的a并删除height个td元素。