HTML 前端顶部生成四个菜单栏，且背景颜色为浅灰色

可以使用以下代码来实现：

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

<style>
.menu {
  background-color: #f2f2f2;
  height: 50px;
  line-height: 50px;
}

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

.menu li {
  float: left;
  margin-right: 20px;
}

.menu li:last-child {
  margin-right: 0;
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 0 10px;
  border-radius: 4px;
}

.menu a:hover {
  background-color: #fff;
}
</style>

这段代码会生成一个背景颜色为浅灰色的菜单栏，并在菜单栏中生成四个菜单选项。当鼠标滑过菜单选项时，背景颜色会变成白色。你可以根据自己的需求进行修改。