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相对于其父li显示：

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

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

css下拉子菜单不会丢失在父菜单项下

1 个答案: