html不用class实现导航栏下拉菜单

要实现一个不使用 `class` 的 HTML 导航栏下拉菜单，你可以使用 HTML、CSS 和 JavaScript。以下是一个简单的例子：

HTML 代码：

<nav>
  <ul>
    <li><a href="#">菜单 1</a></li>
    <li><a href="#">菜单 2</a>
      <ul>
        <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>

CSS 代码：

/* 导航栏样式 */
nav {
  background-color: #333;
  color: #fff;
}

/* 导航栏列表样式 */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 导航栏列表项样式 */
nav ul li {
  display: inline-block;
  position: relative;
}

/* 导航栏链接样式 */
nav ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}

/* 导航栏下拉菜单样式 */
nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
  padding: 0;
}

/* 导航栏下拉菜单列表项样式 */
nav ul li ul li {
  display: block;
  width: 100%;
}

/* 导航栏下拉菜单链接样式 */
nav ul li ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}

/* 鼠标悬停在导航栏列表项上时显示下拉菜单 */
nav ul li:hover ul {
  display: block;
}

JavaScript 代码：

// 点击导航栏链接时显示或隐藏下拉菜单
var navLinks = document.querySelectorAll('nav ul li a');
for (var i = 0; i < navLinks.length; i++) {
  navLinks[i].onclick = function(event) {
    var subMenu = this.parentNode.querySelector('ul');
    if (subMenu) {
      event.preventDefault();
      subMenu.style.display = subMenu.style.display == 'block' ? 'none' : 'block';
    }
  }
}

// 点击导航栏以外的区域时隐藏下拉菜单
window.onclick = function(event) {
  var subMenus = document.querySelectorAll('nav ul li ul');
  for (var i = 0; i < subMenus.length; i++) {
    if (subMenus[i].style.display == 'block' && !subMenus[i].parentNode.contains(event.target)) {
      subMenus[i].style.display = 'none';
    }
  }
}

你可以根据自己的需求修改 CSS 样式和 JavaScript 代码。