写一个类似小米商城导航栏鼠标悬空时出现下拉列表

好的，我可以帮你解答这个问题。下面是一个简单的示例，用 HTML、CSS 和 JavaScript 实现了一个类似小米商城导航栏鼠标悬停时出现下拉列表的效果。

HTML 代码如下：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">小米手机</a>
      <ul>
        <li><a href="#">小米 10</a></li>
        <li><a href="#">小米 9</a></li>
        <li><a href="#">小米 9 SE</a></li>
        <li><a href="#">小米 8</a></li>
      </ul>
    </li>
    <li><a href="#">电视</a>
      <ul>
        <li><a href="#">小米电视4S 55英寸</a></li>
        <li><a href="#">小米电视4C 43英寸</a></li>
        <li><a href="#">小米电视4A 32英寸</a></li>
      </ul>
    </li>
    <li><a href="#">笔记本</a>
      <ul>
        <li><a href="#">小米笔记本Pro 15.6英寸</a></li>
        <li><a href="#">小米笔记本Air 13.3英寸</a></li>
        <li><a href="#">小米笔记本Ruby 2019款</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS 代码如下：

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

nav ul li {
  float: left;
  position: relative;
}

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

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  float: none;
  position: static;
  border-top: 1px solid #ccc;
}

nav ul li ul li a {
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
}

nav ul li ul li a:hover {
  background-color: #f2f2f2;
}

JavaScript 代码如下：

// 暂无 JavaScript 代码

当鼠标悬停在导航栏的某个菜单项上时，该菜单项下方会出现一个下拉列表，显示该菜单项下的子菜单。在示例中，下拉列表的样式使用了 CSS 中的绝对定位和 box-shadow 属性，以及:hover 伪类选择器来控制下拉列表的显示和隐藏。同时，JavaScript 没有被使用，因为这个效果可以完全由 CSS 实现。