编写一段html和CSS代码，要求编写一个有八个菜单项的首页导航栏，并且开向下还原不会让导航栏中的菜单项到处浮动，使得菜单栏中的菜单项不会因为点击向下还愿之后向下一行浮动

好的，以下是一个简单的示例代码：

HTML代码：

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a href="#" class="nav-link">首页</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">关于我们</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">产品中心</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">新闻资讯</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">联系我们</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">加入我们</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">友情链接</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">网站地图</a>
    </li>
  </ul>
</nav>

CSS代码：

.navbar {
  background-color: #f8f9fa;
  padding: 10px;
}

.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin-right: 10px;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-link {
  color: #212529;
  text-decoration: none;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.nav-link:hover {
  background-color: #e9ecef;
}

解释：

- 首先，我们使用 nav 元素来包含导航栏，然后使用 ul 和 li 元素创建菜单项。
- 使用 flex 布局，将菜单项放在一行，并且使用 space-between 来平均分布菜单项之间的空间。
- 使用 margin-right 来添加菜单项之间的间距，最后一个菜单项不需要右边距。
- 在菜单项上使用 padding 来增加可点击区域，并且使用 border-radius 来使菜单项的边角更加圆润。
- 当鼠标悬停在菜单项上时，使用 transition 和 background-color 来添加一个简单的动画效果。