鼠标悬停时导航菜单下边框从中展开的效果

要实现鼠标悬停时导航菜单下边框从中展开的效果，你可以使用CSS的transition属性和JavaScript的事件处理程序来实现。以下是一个示例代码片段，演示了如何实现这个效果：

HTML:

<ul class="menu">
  <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>

CSS:

.menu li {
  position: relative;
  display: inline-block;
  padding: 10px;
}

.menu li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: blue;
  transition: width 0.5s ease-in-out;
}

.menu li:hover::after {
  width: 100%;
  left: 0;
}

JavaScript:

var menuItems = document.querySelectorAll('.menu li');

menuItems.forEach(function(item) {
  item.addEventListener('mouseenter', function() {
    this.querySelector('a').classList.add('active');
  });

  item.addEventListener('mouseleave', function() {
    this.querySelector('a').classList.remove('active');
  });
});

在上述代码中，我们使用了CSS的::after伪元素来创建导航菜单下方的边框。通过将width属性设置为0，并在::after伪元素上应用过渡效果，我们可以实现边框从中展开的效果。当鼠标悬停在菜单项上时，我们通过添加/移除active类来触发边框展开/收起的动画。

请将上述HTML、CSS和JavaScript代码整合到你的项目中，并确保在HTML中引入了JavaScript文件。这样，当鼠标悬停在导航菜单上时，边框将从中展开，并在经过0.5秒后收起。