前端学习——纯CSS模仿真实按钮导航栏

纯CSS模仿真实按钮导航栏

之前写过一篇博客是写翻转导航栏的，与本次的导航栏样式不一样，本次的导航栏更像是按钮。先看图：
1.原本的样式：

2.鼠标移到上面的时候的样式

3.点击时候的样式：

就像我们按按钮的时候一样，是会凹陷进去的，接下来看怎么实现的。

HTML部分

这个部分不多说，直接看代码就好。

<div class="div">
    <ul class="ul">
      <li> <a href="#">首页</a></li>
      <li> <a href="#">首页</a></li>
      <li> <a href="#">首页</a></li>
      <li> <a href="#">首页</a></li>
      <li> <a href="#">首页</a></li>
    </ul>
</div>

CSS部分

先实现原本的样式

.div{
   
   
      width: 100%;
      bac