HTML5的导航栏怎么写而且鼠标放上去会变颜色出现分栏

HTML5中的导航栏可以使用`<nav>`标签来定义，同时可以使用CSS样式来实现鼠标放上去颜色变化和分栏效果。以下是一个示例代码：

HTML代码：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

CSS代码：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav li {
  margin-right: 20px;
}

nav li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

nav li a:hover {
  background-color: #333;
  color: #fff;
}

nav li:last-child {
  margin-right: 0;
}

在上面的代码中，`<nav>`标签用于定义导航栏，`<ul>`标签用于定义一个无序列表，`<li>`标签用于定义列表中的每一个项目，而`<a>`标签则用于定义链接。CSS样式中，`display: flex;`将列表项以弹性盒子的形式排列，`margin-right: 20px;`设置了列表项之间的水平间距，`padding: 10px 15px;`设置了链接的内边距，`text-decoration: none;`去掉了链接的下划线，`color: #333;`设置链接文字的颜色，`transition: all 0.3s ease;`设置了链接的颜色变化动画。当鼠标悬停在链接上时，`background-color: #333;`将链接背景色变为黑色，`color: #fff;`将链接文字颜色变为白色。`nav li:last-child`用于去掉最后一个列表项的右侧间距。

如果想要实现分栏效果，可以在CSS样式中添加类似于`border-bottom: 2px solid #333;`的样式，来为导航栏下方添加一条分割线。