子菜单中没有出现下面的下拉菜单

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”父菜单正下方。我已经回顾了有关堆栈溢出的类似问题，但仍然无法找出合适的解决方案。

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>