css/jquery中的移动(触摸)设备友好下拉菜单

<nav>
  <ul class="menu">
    <li><a href="#">主菜单项 1</a></li>
    <li class="dropdown">
      <a href="#">主菜单项 2</a>
      <ul class="submenu">
        <li><a href="#">子菜单项 1</a></li>
        <li><a href="#">子菜单项 2</a></li>
        <li><a href="#">子菜单项 3</a></li>
      </ul>
    </li>
    <li><a href="#">主菜单项 3</a></li>
  </ul>
</nav>

/* 主菜单样式 */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  display: inline-block;
}

.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

/* 子菜单样式 */
.submenu {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
}

.submenu li {
  display: block;
}

.submenu a {
  padding: 10px;
}

// 当主菜单项被点击时
$('.dropdown > a').on('click', function(e) {
  // 阻止默认事件
  e.preventDefault();
  // 切换子菜单的显示状态
  $('.submenu').toggle();
});