在上次对话的需求的基础上，我还需要那些顶级菜单如果改变了激活状态，样式也要同时改变，默认是第一个顶级菜单是激活状态，当点击了其他任何顶级菜单，第一个菜单就要失去激活状态，背景色变为白色，字体变为黑色，而刚刚被点击的菜单就改变为被激活状态，背景色为蓝色，字体为白色，同理，再次点击其他顶级菜单，都是如此改变状态和样式。请帮我重新用html和css完善上边的代码，以同时达到现在要求的效果。

好的，我理解了你的要求，以下是代码实现：

HTML代码：

<div class="menu">
  <ul>
    <li class="active"><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
</div>

CSS代码：

.menu {
  background-color: #f2f2f2;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 20px;
}

.menu li.active {
  background-color: blue;
  color: white;
}

.menu li.active a {
  color: white;
}

.menu li a {
  color: black;
  text-decoration: none;
}

.menu li:hover {
  background-color: white;
}

.menu li:hover a {
  color: black;
}

解释：在HTML代码中，我们先设置了一个menu的div，里面包含了一个ul列表，列表中有三个li元素，第一个li元素默认是激活状态，所以它有一个active的class。在CSS代码中，我们设置了menu的样式，设置了ul和li的样式，同时设置了激活状态的li元素以及激活状态下的a标签的样式。在li:hover时，我们设置了鼠标移动到li上时的样式。