子菜单未出现在下拉菜单下方

Question

HTML

<nav class="row-nav">
    <ul class="nav-list">
        <li><a href=#> menu 1 </a></li>
        <li><a href=#> menu 2 </a></li>
        <li class="dropdown">
            <a href=#> menu 3 </a>
            <ul>
                <li><a href=#> submenu 1 </a></li>
                <li><a href=#> submenu 2 </a></li>
            </ul>
        </li>
    </ul>
</nav> 

CSS

.nav-list li{
    display:inline;
}

li a{
    color:white;
    text-decoration: none;
    font-size:24px;
    line-height: 20px;
    margin:0 5%;
}

li a:hover , li a:active {
    color: #f23c48;
}

.dropdown ul{ 
    display:none;
}

.dropdown:hover > ul { 
    display:block;
    position: absolute;
}

.dropdown ul li {
    display:block;
}

我无法让子菜单显示在父菜单下方，用于下拉菜单3＆＃34;菜单3＆＃34;。我已经回顾了有关堆栈溢出的类似问题，但仍无法找出合适的解决方案。

Answer 1

要使绝对定位有效，父母必须有relative或absolute位置，且必须是block或inline-block。此外，您还需要覆盖默认列表样式，因为它在列表元素的左侧默认有一些填充。

.nav-list > li {
  display: inline-block;
  margin: 0 5px;
}

li a {
  color: black;
  text-decoration: none;
  font-size: 24px;
  line-height: 20px;
}

li a:hover,
li a:active {
  color: #f23c48;
}

.dropdown {
  position: relative;
}

.dropdown ul {
  display: none;
  list-style: none;
  position: absolute;
  padding: 0;
}

.dropdown:hover > ul {
  display: block;
}

<nav class="row-nav">
  <ul class="nav-list">
    <li><a href=#> menu 1 </a></li>
    <li><a href=#> menu 2 </a></li>
    <li class="dropdown">
      <a href=#> menu 3 </a>
      <ul>
        <li><a href=#>sub 1</a></li>
        <li><a href=#>sub 2</a></li>
      </ul>
    </li>
  </ul>
</nav>