导航栏下拉列表，给我一个参考代码

下面是一个简单的导航栏下拉列表的参考代码，你可以根据自己的需求进行修改：

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS:

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #333;
  text-decoration: none;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  padding: 0;
  margin: 0;
}

nav ul ul li {
  display: block;
  float: none;
}

nav ul ul a {
  padding: 10px;
}

nav li:hover > ul {
  display: inherit;
}

在这个例子中，我们使用了无序列表和嵌套的无序列表来创建导航栏和下拉列表。CSS中的关键是将下拉列表的位置设置为“绝对”并且将其隐藏，然后在鼠标悬停在包含它的列表项上时将其显示出来。