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的解决方案是在悬停时显示的列表项目中创建列表，我在过去使用过一些简单的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。另外，我不建议使用表格，但这是您的选择。看看这个例子：

＆＃13;

.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; }

＆＃13;

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

＆＃13;

Table Nav Bar的HTML下拉列表

2 个答案: