通过css也可以实现简单的导航栏效果,一些不会写js的下伙伴不用担心了。　先上HTML部分　<　nav　>　<　ul　class　=　"level"　>　<　li　><　a　href　=　""　>　首页　　<　li　>　<　a　href　=　""　>　栏目1　　<　ul　class　=　"two"　>　<　li　>　二级菜单1　　<　li　>　二级菜单2　　<　li　>　二级菜单3　　　　<　li　>　<　a　href　=　""　>　栏目2　　<　ul　class　=　"two"　>　<　li　>　二级菜单4　　<　li　>　二级菜单5　　<　li　>　二级菜单6　　　　<　li　>　<　a　href　=　""　>　栏目3　　<　ul　class　=　"two"　>　<　li　>　二级菜单7　　<　li　>　二级菜单8　　<　li　>　二级菜单9　　　　<　li　>　<　a　href　=　""　>　栏目4　　<　ul　class　=　"two"　>　<　li　>　二级菜单10　　<　li　>　二级菜单11　　<　li　>　二级菜单12　　　　<　li　>　<　a　href　=　""　>　栏目5　　<　ul　class　=　"two"　>　<　li　>　二级菜单13　　<　li　>　二级菜单14　　<　li　>　二级菜单15　　　　　　效果如下图,现在什么样式也没有,我们需要对HTML进行一些样式上的调整让其看起来好看一下。　现附上css:　<　style　>　*　{　padding　:　0　;　margin　:　0　;}　/*　先重置一下html,消除HTML标签默认的内外边距　*/　.　wrap　{　width　:　800　px　;　margin　:　0　auto　;}　/*　对导航的内容设置一个主体为800px的宽并使其居中　*/　.　clear　{　clear　:　both　;}　/*　清除浮动　*/　a　{　text-decoration-line　:　none　;}　/*　去掉默认a标签的下划线　*/　ul　,　li　{　list-style　:　none　;}　nav　.　level　>　li　{　float　:　left　;　width　:　16.66　%　;　text-align　:　center　;　background　:　bisque　;　padding　:　10　px　0　;　font-size　:　16　px　;}　nav　.　level　>　li　a　{　color　:　black　;}　nav　.　level　>　li　:　hover　{　background　:　red　;}　/*　设置鼠标滑过后的样式　*/　nav　.　two　{　display　:　none　;}　/*　先使二级菜单的内容隐藏　*/　nav　.　level　>　li　:　hover　.　two　{　display　:　block　;}　/*　鼠标滑过一级菜单后的显示二级菜单　*/　　如下图,现在导航栏已经有了一些大概的效果了,但是目前来看还是有一些不好看,我们还需要美观一下　现在我们要写一下颜色变换和二级导航的样式,话不多说,直接附上代码　<　style　>　nav　.　level　>　li　{　transition　:　.4　s　;}　/*　颜色添加过渡时间　未处理兼容性*/　nav　.　two　li　{　padding　:　5　px　0　;　transition　:　.4　s　;　cursor　:　pointer　;}　nav　.　two　li　:　hover　{　background　:　pink　;}　　效果如下图,现在我们已经实现了纯css实现导航栏下拉效果　是不是很简单,有什么不懂的欢迎留言!　最后附上全部的代码　　<　html　lang　=　"en"　>　<　head　>　<　meta　charset　=　"UTF-8"　>　<　meta　name　=　"viewport"　content　=　"width=device-width,　initial-scale=1.0"　>　<　meta　http-equiv　=　"X-UA-Compatible"　content　=　"ie=edge"　>　<　title　>　css实现简单的导航栏下拉　　　<　style　>　*　{　padding　:　0　;　margin　:　0　;}　/*　先重置一下html,消除HTML标签默认的内外边距　*/　.　wrap　{　width　:　800　px　;　margin　:　0　auto　;}　/*　对导航的内容设置一个主体为800px的宽并使其居中　*/　.　clear　{　clear　:　both　;}　/*　清除浮动　*/　a　{　text-decoration-line　:　none　;}　/*　去掉默认a标签的下划线　*/　ul　,　li　{　list-style　:　none　;}　nav　.　level　>　li　{　float　:　left　;　width　:　16.66　%　;　text-align　:　center　;　background　:　bisque　;　padding　:　10　px　0　;　font-size　:　16　px　;　transition　:　.4　s　;}　nav　.　level　>　li　a　{　color　:　black　;}　nav　.　level　>　li　:　hover　{　background　:　red　;}　/*　设置鼠标滑过后的样式　*/　nav　.　two　{　display　:　none　;　margin-top　:　10　px　;}　/*　先使二级菜单的内容隐藏　*/　nav　.　level　>　li　:　hover　.　two　{　display　:　block　;}　/*　鼠标滑过一级菜单后的显示二级菜单　*/　nav　.　two　li　{　padding　:　5　px　0　;　transition　:　.4　s　;　cursor　:　pointer　;}　nav　.　two　li　:　hover　{　background　:　pink　;}　　<　body　>　<　nav　>　<　div　class　=　"wrap"　>　<　ul　class　=　"level"　>　<　li　><　a　href　=　""　>　首页　　<　li　>　<　a　href　=　""　>　栏目1　　<　ul　class　=　"two"　>　<　li　>　二级菜单1　　<　li　>　二级菜单2　　<　li　>　二级菜单3　　　　<　li　>　<　a　href　=　""　>　栏目2　　<　ul　class　=　"two"　>　<　li　>　二级菜单4　　<　li　>　二级菜单5　　<　li　>　二级菜单6　　　　<　li　>　<　a　href　=　""　>　栏目3　　<　ul　class　=　"two"　>　<　li　>　二级菜单7　　<　li　>　二级菜单8　　<　li　>　二级菜单9　　　　<　li　>　<　a　href　=　""　>　栏目4　　<　ul　class　=　"two"　>　<　li　>　二级菜单10　　<　li　>　二级菜单11　　<　li　>　二级菜单12　　　　<　li　>　<　a　href　=　""　>　栏目5　　<　ul　class　=　"two"　>　<　li　>　二级菜单13　　<　li　>　二级菜单14　　<　li　>　二级菜单15　　　　　　　　　本文为原创文章,原文地址为: