html - css 下拉子菜单不在父菜单项下

Question

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

DEMO

请帮忙。谢谢。

********* 这里是 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 相对于它们的父级 li 出现:

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

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