CSS导航菜单教程

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

/* 首先对整体容器进行设置 */
.nav-menu {
list-style-type:none; /* 移除默认的圆点符号 */
margin:0;
padding:0;
display:flex;
justify-content:center;
}

/* 设置各个导航元素以及其内的链接样式 */
.nav-menu li {
position:relative; /* 这对于后续可能添加下拉菜单等交互效果非常有用 */
text-align:center;
flex-grow:1; /* 让所有列宽度平均分配 */
}
.nav-menu li:not(:last-child) {
border-right:solid 1px #ccc; /* 添加分隔线 */
}

.nav-menu a{
display:block;
color:#333;
background-color:white;
padding:.5em 1em;
text-decoration:none;
transition: all .2s ease-in-out; /* 增加平滑过渡动画 */
}

.nav-menu a:hover,
.nav-menu .active {
background-color: #f8f9fa; /* 当鼠标悬停或激活时改变背景颜色 */
color:black;
}