ul li实现的水平导航菜单
分类:实例代码
分享一段代码实例,它实现了水平导航菜单效果。
鼠标悬浮菜单也会有背景变色的功能,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> body, div, ul, li { padding: 0; margin: 0; } #nav { width: 960px; height: 35px; margin: 30px auto; background: #eee; list-style: none; } #nav li { float: left; height: 35px; line-height: 35px; text-align: center; } #nav li a { font-size: 12px; text-decoration: none; color: #333; height: 35px; display: block; float: left; padding: 0 10px; } #nav li a:hover { color: #fff; text-decoration: underline; background: #000; } </style> </head> <body> <ul id="nav"> <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> <li><a href="#">前端教程网六</a></li> </ul> </body> </html>
ul li实现的水平导航菜单,这样的场景在实际项目中还是用的比较多的,关于ul li实现的水平导航菜单就介绍到这了。
ul li实现的水平导航菜单属于前端实例代码,有关更多实例代码大家可以查看。