Selenium WebDriver鼠标悬停操作：主菜单悬停后如何操作子菜单？

Hey there! Let's walk through how to implement this nested menu interaction—since you mentioned hovering over the main menu first, clicking it, then interacting with sub-menu items via hover, I've got two practical approaches for you:

This method uses a hidden checkbox to track the main menu's clicked state, paired with CSS selectors to keep the sub-menu open after clicking, while supporting hover interactions on sub-items.

Step 1: Build the HTML structure #

<nav class="menu-container">
  <!-- 主菜单：悬停时会有样式反馈，点击触发菜单展开 -->
  <label class="main-menu" for="menu-toggle">主菜单</label>
  <!-- 隐藏的复选框，用来记录点击状态 -->
  <input type="checkbox" id="menu-toggle" hidden>
  <!-- 子菜单容器 -->
  <ul class="sub-menu">
    <li class="sub-menu-item">子菜单选项1</li>
    <li class="sub-menu-item">子菜单选项2</li>
    <li class="sub-menu-item has-child">
      带二级子菜单的选项
      <ul class="sub-sub-menu">
        <li>二级子菜单1</li>
        <li>二级子菜单2</li>
      </ul>
    </li>
  </ul>
</nav>

Step 2: Add CSS styles #

/* 主菜单基础样式 */
.main-menu {
  padding: 10px 20px;
  background: #f0f0f0;
  cursor: pointer;
  display: inline-block;
}

/* 主菜单悬停时的反馈效果 */
.main-menu:hover {
  background: #ddd;
}

/* 默认隐藏子菜单 */
.sub-menu {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #eee;
}

/* 点击主菜单后，显示子菜单 */
#menu-toggle:checked + .sub-menu {
  display: block;
}

/* 子菜单选项基础样式 */
.sub-menu-item {
  padding: 8px 15px;
  cursor: pointer;
}

/* 子菜单选项悬停时高亮 */
.sub-menu-item:hover {
  background: #e5e5e5;
}

/* 默认隐藏二级子菜单 */
.sub-sub-menu {
  display: none;
  list-style: none;
  padding-left: 20px;
}

/* 悬停带二级子菜单的选项时，展开二级菜单 */
.sub-menu-item.has-child:hover .sub-sub-menu {
  display: block;
}

If you need more flexibility—like closing the menu when clicking outside, adding smooth animations, or handling dynamic content—JS is the way to go.

Step 1: HTML structure #

<nav class="menu-container">
  <div class="main-menu">主菜单</div>
  <ul class="sub-menu">
    <li class="sub-menu-item">子菜单选项1</li>
    <li class="sub-menu-item">子菜单选项2</li>
    <li class="sub-menu-item has-child">
      带二级子菜单的选项
      <ul class="sub-sub-menu">
        <li>二级子菜单1</li>
        <li>二级子菜单2</li>
      </ul>
    </li>
  </ul>
</nav>

Step 2: CSS styles with animations #

.main-menu {
  padding: 10px 20px;
  background: #f0f0f0;
  cursor: pointer;
  display: inline-block;
}

.main-menu:hover {
  background: #ddd;
}

/* 子菜单默认收起，用max-height实现平滑展开/收起 */
.sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #eee;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 激活状态下展开子菜单 */
.sub-menu.active {
  max-height: 300px; /* 根据你的菜单内容调整高度 */
}

.sub-menu-item {
  padding: 8px 15px;
  cursor: pointer;
}

.sub-menu-item:hover {
  background: #e5e5e5;
}

.sub-sub-menu {
  list-style: none;
  padding-left: 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sub-menu-item.has-child:hover .sub-sub-menu {
  max-height: 200px;
}

Step 3: JavaScript logic #

const mainMenu = document.querySelector('.main-menu');
const subMenu = document.querySelector('.sub-menu');

// 点击主菜单，切换子菜单的展开/收起状态
mainMenu.addEventListener('click', () => {
  subMenu.classList.toggle('active');
});

// 可选：点击页面其他区域时关闭菜单
document.addEventListener('click', (e) => {
  if (!mainMenu.contains(e.target) && !subMenu.contains(e.target)) {
    subMenu.classList.remove('active');
  }
});

Pick the approach that fits your use case—pure CSS works great for static, simple menus, while JS gives you full control for more dynamic interactions.

内容的提问来源于stack exchange，提问作者S Sufiyaan