纯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