html - css下拉子菜单没有放在父菜单项下

Question

我有一个简单的 css 下拉菜单，但子菜单似乎并没有放在其父菜单的正下方。这里有一个链接到它目前的样子。

演示

请帮忙。谢谢你。

*********这里是html**********************

<header>
<table>
      <td>
      <h1>Header</h1>
        <nav>
    <ul>
    <li><a href="#">menu1</a>
    <ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    </ul>
    </li>
    <li><a href="#">menu2</a>
    <ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    </ul>
    </li>
    <li><a href="#">menu3</a>
    <ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    </ul>
    </li>
    <li><a href="#">menu4</a>
    <ul>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    <li><a href="#">sub</a></li>
    </ul>
    </li>
    </ul>
    </nav>
    </td>
    </table>
</header>

**************这里是css ************************

table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
header {
position: absolute;
top:0;
width: 100%;
border: 1px solid black;
}
header h1 {
display: inline-block;
}
nav {
display: inline-block;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
}
nav ul ul li a{
display: block;
}
nav li ul {
display: none;
}
nav li:hover ul{
display:block;
}
nav ul ul li{
display:block;
}

Answer 1

您只需要进行一些小的更改即可使嵌套ul的 s 相对于其父项显示li：

nav li {
    display: inline;
    position: relative;
}

nav li ul {
    display: none;
    position: absolute;
    padding: 0;
}