CSS绝对定位打造下拉菜单教程

<ul class="navbar">
  <li>
    <span class="dropdown-trigger">产品</span>
    <ul class="dropdown-menu">
      <li><a href="#">产品一</a></li>
      <li><a href="#">产品二</a></li>
      <li><a href="#">产品三</a></li>
    </ul>
  </li>
</ul>

.navbar {
  list-style: none;
  padding: 0;
  background: #333;
}
<p>.navbar > li {
position: relative; /<em> 关键：为子菜单提供定位上下文 </em>/
display: inline-block;
}</p><p>.dropdown-trigger {
color: white;
padding: 10px 15px;
display: block;
cursor: pointer;
}</p><p>.dropdown-menu {
position: absolute;
top: 100%; /<em> 紧贴父元素下方 </em>/
left: 0;
background: #444;
list-style: none;
padding: 0;
margin: 0;
min-width: 150px;
opacity: 0;
visibility: hidden; /<em> 隐藏但保留占位 </em>/
transition: opacity 0.2s ease;
}</p><p>/<em> 悬停时显示下拉菜单 </em>/
.navbar > li:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}</p><p>.dropdown-menu li a {
color: white;
text-decoration: none;
display: block;
padding: 10px 15px;
}</p><p>.dropdown-menu li a:hover {
background: #555;
}</p>