表格导航栏的 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 动态创建的。一个简单的 CSS only 解决方案 是在悬停时显示的列表项中创建列表，我过去在一些简单的 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。

Answer 2

您不必使用 javascript。此外，我不建议为此使用表格，但这是您的选择。看这个例子：

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

.nav td { position: relative; }

.nav table,
.nav ul { 
    display: none;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
    left: 0;
}

.nav td:hover table { display: table; /* or display: block; */ }
.nav td:hover ul { display: block; }

<table class="nav">
    <tr>
        <td>
            <a href="index.html">Home</a>
        </td>
        <td>
            <a href="/Videos">All</a>
            <ul>
                <li><a href="#">Item in list</a></li>
                <li><a href="#">Item in list</a></li>
            </ul>
        </td>
        <td><a href="spec.html">Specification</a></td>
        <td>
            <a href="chem.html">Chemistry</a>
            <table>
                <tr>
                    <td><a href="#">Item in table</a></td>
                </tr>
                <tr>
                    <td><a href="#">Item in table</a></td>
                </tr>
            </table>
        </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>