帮我做一个适配渐变背景下的二级伸缩导航栏

制作一个适应渐变背景的二级伸缩导航栏通常涉及到HTML、CSS和JavaScript（如果需要动画效果）。以下是一个简单的步骤说明：

1. **HTML结构**:

<nav class="navbar">
  <div class="brand">Logo</div>
  <button id="toggle-menu" class="hamburger">☰</button>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li class="dropdown">
      <a href="#">Dropdown</a>
      <ul class="sub-menu">
        <li><a href="#">Sub Item 1</a></li>
        <li><a href="#">Sub Item 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

2. **CSS样式**:

.navbar {
  display: flex;
  justify-content: space-between;
  background: linear-gradient(to right, #f0f0f0, #e0e0e0);
}

.brand {
  color: white;
  font-size: 1.5em;
}

.hamburger {
  display: none; /* 初始隐藏 */
  cursor: pointer;
}

.menu {
  list-style-type: none;
  padding: 0;
}

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
}

.dropdown:hover .sub-menu {
  display: block;
}

3. **JavaScript (可选) - 动画效果**:

document.getElementById('toggle-menu').addEventListener('click', function() {
  this.classList.toggle('open');
  document.querySelector('.menu').classList.toggle('show');
});

这里我们添加了一个点击事件监听器，当用户点击汉堡按钮时，会切换`.menu`的显示状态，并可能改变汉堡按钮的样式以表示它已打开（例如添加`open`类）。