如何使用浮动菜单选项创建底部导航栏？

<ul class="bottom-navigation">
  <li><a href="#home">首页</a></li>
  <li><a href="#products">产品</a></li>
  <li><a href="#services">服务</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>

.bottom-navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f9f9f9;
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #ccc;
}

.bottom-navigation li {
  float: left;
}

.bottom-navigation li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.bottom-navigation li a:hover {
  background-color: #ddd;
}

var navItems = document.querySelectorAll('.bottom-navigation li a');

navItems.forEach(function(item) {
  item.addEventListener('click', function() {
    // 移除所有选项的活动状态类
    navItems.forEach(function(item) {
      item.classList.remove('active');
    });
    
    // 添加活动状态类到当前选中的选项
    this.classList.add('active');
  });
});