使悬停背景完全填充到导航背景的末尾

，可以通过以下步骤实现：

首先，确保导航背景具有足够的高度，以完全覆盖悬停背景。导航背景可以使用CSS设置，例如设置背景色或背景图片。
在HTML中，将导航菜单包裹在一个容器元素中，例如一个div或nav标签。
使用CSS将该容器元素设置为相对定位（position: relative），以确保后续元素定位相对于该容器。
在容器元素中添加导航菜单的HTML代码，例如使用无序列表（ul）和列表项（li）来创建导航项。
为导航项的每个列表项添加一个自定义属性，例如data-hover-bg，用于存储悬停时显示的背景色或背景图片。
使用CSS选择器，针对具有特定自定义属性的导航项，设置悬停时的背景色或背景图片，例如:hover伪类或JavaScript事件。
为了实现悬停背景完全填充到导航背景的末尾，可以使用绝对定位（position: absolute）来定位悬停背景。根据实际情况，可以使用伪元素（::before或::after）或其他元素来作为悬停背景的容器。
使用CSS选择器，选择悬停背景的容器元素，并设置其宽度和高度为100%，以填充导航背景的末尾。可以结合使用top、right、bottom和left属性，调整容器元素的位置。

以下是一个示例代码：

HTML:

<div class="navigation">
  <ul>
    <li data-hover-bg="#ff0000">首页</li>
    <li data-hover-bg="#00ff00">关于我们</li>
    <li data-hover-bg="#0000ff">服务</li>
    <li data-hover-bg="#ffff00">联系我们</li>
  </ul>
</div>

CSS:

.navigation {
  background-color: #f1f1f1;
  position: relative;
}

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

.navigation li {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
}

.navigation li:hover {
  color: #fff;
}

.navigation li[data-hover-bg]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  opacity: 0;
  transition: opacity 0.3s;
}

.navigation li:hover::after {
  opacity: 1;
}

.navigation li[data-hover-bg]::after {
  background-color: attr(data-hover-bg);
}

以上代码将在导航背景末尾添加一个悬停背景层，悬停时该层会填充整个导航背景，通过设置data-hover-bg属性来定义悬停背景的颜色。你可以根据需要修改代码中的颜色或样式。