![e2a3b3cbc8ad5f00a5e4a664f668a4b3.png](https://i-blog.csdnimg.cn/blog_migrate/310cdc41ad5c65fd4235db38b8c7097b.png)
通过css也可以实现简单的导航栏效果,一些不会写js的下伙伴不用担心了。
先上HTML部分
<
效果如下图,现在什么样式也没有,我们需要对HTML进行一些样式上的调整让其看起来好看一下。
![cedddd4bf748590e153b89720ffb7658.png](https://i-blog.csdnimg.cn/blog_migrate/be3980a4f6f4b962653660e58166fdb7.jpeg)
现附上css:
<
如下图,现在导航栏已经有了一些大概的效果了,但是目前来看还是有一些不好看,我们还需要美观一下
![1de12ecc87fd924fd87e7d9e31c220c7.png](https://i-blog.csdnimg.cn/blog_migrate/fbc102d168d67347f4a3a0434f0697c2.png)
现在我们要写一下颜色变换和二级导航的样式,话不多说,直接附上代码
<
效果如下图,现在我们已经实现了纯css实现导航栏下拉效果
![7a5d7420a6454336de304a63ee1e0cfe.png](https://i-blog.csdnimg.cn/blog_migrate/8130518f7f8c1b096cd9415a7a1a31e1.jpeg)
是不是很简单,有什么不懂的欢迎留言!
最后附上全部的代码
<!DOCTYPE html>