通过css也可以实现简单的导航栏效果，一些不会写js的下伙伴不用担心了。
先上HTML部分
效果如下图，现在什么样式也没有，我们需要对HTML进行一些样式上的调整让其看起来好看一下。
现附上css：
如下图，现在导航栏已经有了一些大概的效果了，但是目前来看还是有一些不好看，我们还需要美观一下
现在我们要写一下颜色变换和二级导航的样式，话不多说，直接附上代码
nav .level>li{transition: .4s;} /* 颜色添加过渡时间 未处理兼容性*/
nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
nav .two li:hover{background: pink;}效果如下图，现在我们已经实现了纯css实现导航栏下拉效果
是不是很简单，有什么不懂的欢迎留言！
最后附上全部的代码
css实现简单的导航栏下拉
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/112610.html