div+css实现鼠标经过背景高亮的导航菜单代码

实现鼠标经过背景高亮的导航菜单时，我们可以使用div和css进行实现。下面是完整的攻略：

1. 创建HTML结构

首先，在HTML中创建导航菜单的结构，如下所示：

<div class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">新闻动态</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

在这个结构中，我们使用了div元素来包裹整个导航菜单，使用了ul和li元素来创建具体的菜单项，使用了a元素来添加链接。

2. 添加CSS样式

接下来，我们需要使用CSS来为导航菜单添加样式。我们首先需要为menu类添加一些通用的样式，如下所示：

.menu {
  width: 100%;
  background-color: #f2f2f2;
  border-bottom: 1px solid #e5e5e5;
}

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

.menu li {
  float: left;
  width: 25%;
  text-align: center;
}

在这段CSS代码中，我们为menu类定义了宽度、背景颜色和边框，为ul元素定义了一些基本样式，并为li元素定义了浮动、宽度和文本对齐方式。

接下来，我们要为导航菜单添加鼠标经过时的样式，以达到背景高亮的效果。我们使用:hover选择器来实现这一效果，代码如下所示：

.menu li:hover {
  background-color: #e5e5e5;
}

鼠标经过时，li元素的背景颜色会变成#e5e5e5。

3. 完整代码示例

下面是完整的HTML和CSS代码示例：

<div class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">新闻动态</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

.menu {
  width: 100%;
  background-color: #f2f2f2;
  border-bottom: 1px solid #e5e5e5;
}

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

.menu li {
  float: left;
  width: 25%;
  text-align: center;
}

.menu li:hover {
  background-color: #e5e5e5;
}

我们可以根据实际需求自行调整CSS样式，实现不同样式的导航菜单。例如，我们可以为菜单项添加字体样式、更改鼠标样式等。在实际开发中，需要灵活运用CSS来为网站的各个元素添加样式，达到更好的用户体验。