html➕css➕js制作一个二级菜单栏其中菜单栏的是方框有小箭头，点开后变色

HTML、CSS和JavaScript可以组合起来创建动态的二级菜单栏。下面是一个简单的示例：

首先，HTML结构：

<nav id="menu">
  <ul class="primary-menu">
    <li><a href="#" class="item">一级菜单1</a>
      <ul class="sub-menu">
        <li><a href="#" class="sub-item">二级菜单1-1</a></li>
        <li><a href="#" class="sub-item">二级菜单1-2</a></li>
      </ul>
    </li>
    <!-- 添加更多一级菜单 -->
  </ul>
</nav>

接下来，CSS样式：

#menu {
  position: relative;
}

.primary-menu li {
  display: inline-block;
}

.sub-menu {
  display: none;
  position: absolute; /* 隐藏子菜单直到点击 */
  background-color: #f0f0f0;
}

.item:hover .sub-menu {
  display: block; /* 当一级菜单被悬停时显示子菜单 */
}

.sub-item {
  padding: 5px 10px;
  cursor: pointer;
}

.sub-item:hover {
  background-color: #e0e0e0; /* 点击子菜单项时改变颜色 */
}

最后，使用JavaScript (假设是jQuery) 来添加交互效果：

$(document).ready(function() {
  // 可能需要根据实际需求修改
  $('.item').click(function(e) {
    e.stopPropagation(); // 阻止事件冒泡到父元素
    $(this).toggleClass('active'); // 切换一级菜单背景颜色
    $(this).next('.sub-menu').slideToggle(); // 显示或隐藏子菜单
  });
});

这样，当用户点击一级菜单项时，对应的子菜单会显示，并且一级菜单项会变色以标识当前状态。