用CSS实现下拉菜单的多种方法

所属分类：网络编程 / CSS/HTML 阅读数： 1949

收藏 0赞 0分享

横向下拉菜单

<!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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>横向下拉菜单</title>   </head> <body> <ul id="nav"> <li><a href="#">菜单一</a> <ul> <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> </li> <li><a href="#">菜单二</a> <ul> <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> </li> <li><a href="#">菜单三</a> <ul> <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> </li> <li><a href="#">菜单四</a> <ul> <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> </li> <li><a href="#">菜单五</a> <ul> <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> </li> <li><a href="#">菜单六</a> <ul> <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> </li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS下拉菜单演示</title>   </head> <body> <ul id="nav"> <li><a href="#">产品介绍</a> <ul> <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> </li> <li><a href="#">服务介绍</a> <ul> <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> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四111</a></li> </ul> </li> <li><a href="#">在线演示</a> <ul> <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> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <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> <li><a href="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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=utf-8" /> <title>CSS Menu - Horizontal</title>   </head> <body> <h1>CSS Menu - Horizontal</h1> <hr /> <ul id="navmenu"> <li><a href="#">Blog</a></li> <li><a href="#">Work +</a> <ul> <li><a href="#">Websites +</a> <ul> <li><a href="#">qrayg</a></li> <li><a href="#">qArcade</a></li> <li><a href="#">qLoM</a></li> <li><a href="#">qDT</a></li> </ul> </li> <li><a href="#">Pen and Ink</a></li> <li><a href="#">Free Interfaces</a></li> </ul> </li> <li><a href="#">Learn +</a> <ul> <li><a href="#">Fireworks +</a> <ul> <li><a href="#">aquaButton</a></li> <li><a href="#">aquaButton2</a></li> <li><a href="#">waterDrop</a></li> <li><a href="#">lightFX</a></li> <li><a href="#">lightFX2</a></li> </ul> </li> <li><a href="#">CSS +</a> <ul> <li><a href="#">footerStick</a></li> <li><a href="#">spriteNav</a></li> <li><a href="#">@import</a></li> </ul> </li> </ul> </li> <li><a href="#">Info</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

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=utf-8" /> <title>CSS Menu - Vertical</title>   </head> <body> <h1>CSS Menu - Vertical</h1> <hr /> <ul id="navmenu"> <li><a href="#">Blog</a></li> <li><a href="#">Work +</a> <ul> <li><a href="#">Websites +</a> <ul> <li><a href="#">qrayg</a></li> <li><a href="#">qArcade</a></li> <li><a href="#">qLoM</a></li> <li><a href="#">qDT</a></li> </ul> </li> <li><a href="#">Pen and Ink</a></li> <li><a href="#">Free Interfaces</a></li> </ul> </li> <li><a href="#">Learn +</a> <ul> <li><a href="#">Fireworks +</a> <ul> <li><a href="#">aquaButton</a></li> <li><a href="#">aquaButton2</a></li> <li><a href="#">waterDrop</a></li> <li><a href="#">lightFX</a></li> <li><a href="#">lightFX2</a></li> </ul> </li> <li><a href="#">CSS +</a> <ul> <li><a href="#">footerStick</a></li> <li><a href="#">spriteNav</a></li> <li><a href="#">@import</a></li> </ul> </li> </ul> </li> <li><a href="#">Info</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

CSS实现的中英文双语导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Keywords" content="bilingual menu,中英文双语菜单" /> <meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> <meta content="all" name="robots" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="http://www.forest53.com" /> <title>完全用CSS实现的中英文双语导航菜单</title>  <link href="../css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="top"> <ul id="nav"> <li><a class="bi" href="Http://www.junstudio.org/">Home<span>首　页</span></a></li> <li><a class="bi" href="Http://www.junstudio.org/blog">Blog<span>日志</span></a></li> <li><a class="bi" href="Http://www.junstudio.org/guestbook">guestbook<span>留言本</span></a></li> <li><a class="bi" href="Http://www.pickbar.com/">Pickbar<span>精品吧</span></a></li> <li><a class="bi" href="Http://www.fansir.com/">fansir<span>樊SIR</span></a></li> </ul> <div id="navbar"></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

用CSS实现下拉菜单的多种方法

最窄770px最宽1024px的经典布局研究

CSS使用心得体会

用CSS实现链接的虚线下划线效果

动态CSS站点教程：多个页面样式提供浏览者选择

鲜为人知的CSS技巧10则

快速制作CSS导航菜单教

给图片在博客中添加滤镜效果

DIV+CSS网页制作布局技巧学习

详谈 CSS样式表使用：链接/嵌入

表格隔行换色 css expression

网络赚钱

站长故事