hover鼠标悬停菜单导航展开弹性下拉菜单

当用户将鼠标悬停在菜单上时，弹性下拉菜单（Hover Menu Navigation）是一种常见的交互设计，它会在鼠标指针悬停时显示额外的选项，提供更丰富的导航。这种效果通常是通过CSS实现的。以下是基本步骤：

1. HTML结构：
首先，你需要一个主菜单列表和一个隐藏的下拉菜单。例如：

   <nav class="dropdown">
     <ul class="menu">
       <li><a href="#">主菜</a>
         <ul class="sub-menu">
           <li><a href="#">选项1</a></li>
           <li><a href="#">选项2</a></li>
         </ul>
       </li>
       <!-- 更多菜单项 -->
     </ul>
   </nav>

2. CSS样式：
- 设置默认样式，比如隐藏下拉菜单：

     .menu > ul.sub-menu {
       display: none; /* 默认隐藏 */
     }

- 当鼠标悬停在`.menu`上时，展示`.sub-menu`：

     .menu:hover > ul.sub-menu {
       display: block; /* 鼠标悬停时显示 */
     }
     .menu li {
       position: relative; /* 让父元素成为定位基础 */
     }

- 可以添加一些过渡效果，让菜单弹出和关闭更加平滑：

     .menu ul.sub-menu {
       transition: all 0.2s ease-in-out;
     }

3. 可选地，你可以添加触屏设备下的处理：

   @media (max-width: 768px) { /* 可能需要自定义屏幕宽度 */
     .menu ul.sub-menu {
       display: flex; /* 改为触摸友好模式 */
     }
   }