今天小编跟大家讲解下有关UL、LI 无序列表实现纯CSS网站导航菜单 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关UL、LI 无序列表实现纯CSS网站导航菜单 的相关资料，希望小伙伴们看了有所帮助。
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title>多行的导航栏</title> <style type="text/css"> * { margin:0; padding:0; } body { font:12px/180% Verdana, Geneva, sans-serif; } li { list-style:none; } a { text-decoration:none; color:#999; } a:hover { color:#900; text-decoration:underline; } .nav_sub { width:700px; margin:0 auto; height:1%; overflow:hidden; margin-bottom:10px; background:#EDEEEF; } .title_nav_sub { display:block; padding:3px 20px; text-align:center; background:#48862F; color:#fff; float:left; } .nav_sub ul { float:left; } .nav_sub ul li { display:inline; } .nav_sub ul a { float:left; padding:3px 20px; } .more { float:right; } </style> </head> <body> <div class="nav_sub"><span class="title_nav_sub">源码</span> <ul> <li><a href="">ASP</a></li> <li><a href="">PHP</a></li> <li><a href="">JSP</a></li> <li><a href="">DELPHI</a></li> <li><a href="">VS</a></li> <li><a href="">AJAX</a></li> <li><a href="">JQUERY</a></li> </ul> <a href=""class="more">更多>></a> </div> <div class="nav_sub"><span class="title_nav_sub">特效</span> <ul> <li><a href="">导航菜单类</a></li> <li><a href="">CSS布局类</a></li> <li><a href="">表单及按钮</a></li> <li><a href="">图片切换</a></li> <li><a href="">鼠标特效</a></li> </ul> <a href=""class="more">更多>></a> </div> <div class="nav_sub"><span class="title_nav_sub">文章</span> <ul> <li><a href="">ASP教程</a></li> <li><a href="">站长资讯</a></li> <li><a href="">PHP技术</a></li> <li><a href="">SEO</a></li> <li><a href="">其它</a></li> </ul> <a href=""class="more">更多>></a> </div> </body> </html> 提示：您可以先修改部分代码再运行来源：爱蒂网
