纯css实现二级下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
纯css实现二级下拉菜单
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
聽說很多小白菜鳥還不會(huì)做二級(jí)菜單，小編簡(jiǎn)單教大家怎么用純css實(shí)現(xiàn)二級(jí)下拉菜單。
實(shí)現(xiàn)的原理很簡(jiǎn)單，就是用display和hover就行了。同理，也可以用這個(gè)方法實(shí)現(xiàn)三級(jí)菜單效果。
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>純css實(shí)現(xiàn)導(dǎo)航下拉菜單</title><style>a{color: white;text-decoration: none;}nav li{display:block;float: left;width: 150px;height:30px;line-height: 30px;text-align: center;background: #000;position: relative;}nav li a{display:block;}nav li ul{display: none;width: 150px;position: absolute;left: 0;top: 30px;padding: 0;margin: 0;background-color: red;}nav li:hover ul{display: block;}</style> </head> <body><nav><li><a href="">菜單一</a><ul><a href="">下拉菜單1</a><a href="">下拉菜單1</a><a href="">下拉菜單1</a><a href="">下拉菜單1</a><a href="">下拉菜單1</a></ul></li><li><a href="">菜單二</a><ul><a href="">下拉菜單2</a><a href="">下拉菜單2</a><a href="">下拉菜單2</a><a href="">下拉菜單2</a><a href="">下拉菜單2</a></ul></li><li><a href="">菜單三</a></li><li><a href="">菜單四</a></li><li><a href="">菜單五</a></li></nav> </body> </html>效果圖如下
總結(jié)
以上是生活随笔為你收集整理的纯css实现二级下拉菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 矩形已知三个点的坐标，求第四个点的坐标
- 下一篇： 软件是指示计算机运行所需的程序,计算机基