表格导航栏的 HTML 下拉列表

Question

如果这是一个重复的问题，我很抱歉，但我似乎无法在任何地方找到答案。任何搜索都会显示带有

的下拉菜单

<nav></nav>

假设这是我的表格(用作导航栏):

<table class="nav">
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="/Videos">All</a></td>
<td><a href="spec.html">Specification</a></td>
<td><a href="chem.html">Chemistry</a></td>
<td><a href="bio.html">Biology</a></td>
<td><a href="phy.html">Physics</a></td>
<td><a href="feedback.html">Feedback</a></td>
<td><a href="donate.html">Donate</a></td>
</tr>
</table>

CSS:

table.nav {
    border: 2px solid white;
    background-color: black;
}

我如何才能让它在我将鼠标悬停在它上面时显示一个带有链接的下拉菜单？我想这样做的原因是样式和方便。

Answer 1

我强烈建议您为此使用列表，尤其是当内容是由某种 PHP 代码的 CMS 动态创建时。一个 simpel 仅 CSS 解决方案 是在悬停时显示的列表项中创建列表，我自己过去在一些 simpel Wordpress 菜单上使用过这个。

对于样式你可以使用这样的东西

body {
    margin: 0px;
    padding: 0px;
}

nav ul {
    margin: 0px;
    padding: 0px;
    float: left;
    list-style-type: none;
}

nav ul li {
    padding: 20px;
    float: left;
}

nav ul li ul {
    display: none;
}

nav ul li ul li {
    width: 100%;
    padding: 0px;
    display: block;
}

nav ul li:hover > ul {
    position: absolute;
    display: block;
}

最后一部分 nav ul li:hover 告诉显示 nav ul li ul 从 display: none 到 display: block ，菜单项应该出现。

您可以使用以下 HTML 标记。当然，您必须做一些造型才能使其更具吸引力。

<nav>
    <!-- Start the listing of main items -->
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2
            <!-- Sub items include -->
            <ul>
                <li>Menu item 2.1</li>
                <li>Menu item 2.2</li>
            </ul>
        </li>
        <li>Menu item 3</li>
    </ul>
</nav>

我之前测试过这段代码，应该可以解决问题。希望这会对您有所帮助，否则您将不得不重新考虑使用 cr0ss 建议的一些 Javascript。