DIV+CSS导航菜单代码，挺不错的。共享下 - 《八零年代》.NET之家 - 博客园

DIV+CSS导航菜单代码，挺不错的。共享下第一种，如果要看演示，新建记事本，把下面代码加进去后保存，文件名改成：abc.htm,然后直接运行就可以看了。

Copy code

<style type="text/css"> #nav{ height: 44px; width: 600px; background: #FFF; } .vline{ background: #999; width: 1px; height: 20px; } #nav ul{ margin:0px; padding: 0px; list-style-type: none; } #nav li{ float: left; font-family: Arial; font-weight: bold; font-size: 12px; text-align: center; } #nav li a{ display: block; width: 84px; line-height: 28px; color: #666; text-decoration: none; border-top: 4px solid #0F35A5; } #nav li a:hover{ color: #7C8DD9; border-top: 4px solid #7C8DD9; } </style> <div id="nav"><ul><li><a href="#">蜗牛在线</a></li><li class="vline"></li> <li><a href="#">蜗牛在线</a></li><li class="vline"></li> <li><a href="#">蜗牛在线</a></li><li class="vline"></li> <li><a href="#">蜗牛在线</a></li><li class="vline"></li> <li><a href="#">蜗牛在线</a></li><li class="vline"></li><li><a href="#">蜗牛在线</a></li><li class="vline"></li><li><a href="#">蜗牛在线</a></li><li class="vline"></li> </ul></div>

第二种：[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title><a href="http://blog.h3bbs.com" target="_blank">天涯博客</a>纯CSS弹出菜单</title><style type="text/css"></style></head><body> <div id="topbanner"></div> <div id="menu"> <div class="mainmenu" onmouseover="submenu1.style.display="block"" onmouseout="submenu1.style.display="none""> <div class="menucontent"><a href="#" title="#">天涯首页</a></div></div> <div class="mainmenu" onmouseover="submenu2.style.display="block"" onmouseout="submenu2.style.display="none""> <div class="menucontent"><a href="#" title="#">天涯日志</a></div></div> <div class="mainmenu" onmouseover="submenu3.style.display="block"" onmouseout="submenu3.style.display="none""> <div class="menucontent"><a href="#" title="#">电子通信</a></div></div> <div class="mainmenu" onmouseover="submenu4.style.display="block"" onmouseout="submenu4.style.display="none""> <div class="menucontent"><a href="#" title="#">网路技术</a></div></div> <div class="mainmenu" onmouseover="submenu5.style.display="block"" onmouseout="submenu5.style.display="none""> <div class="menucontent"><a href="#" title="#">爱在天涯</a></div></div> <div class="mainmenu" onmouseover="submenu6.style.display="block"" onmouseout="submenu6.style.display="none""> <div class="menucontent"><a href="#" title="#">休闲娱乐</a></div></div> <div class="mainmenu" onmouseover="submenu7.style.display="block"" onmouseout="submenu7.style.display="none""> <div class="menucontent"><a href="#" title="#">电脑资讯</a></div></div> </div> <div class="submenu" style="display:none;margin-left:-40px;" onmouseover="submenu1.style.display="block"" onmouseout="submenu1.style.display="none"" id="submenu1"> <ul> <li><a href="#" title="天涯首页">天涯首页</a></li> <li><a href="#" title="天涯首页">天涯首页</a></li> <li><a href="#" title="天涯首页">天涯首页</a></li> <li><a href="#" title="天涯首页">天涯首页</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:41px;" onmouseover="submenu2.style.display="block"" onmouseout="submenu2.style.display="none"" id="submenu2"> <ul> <li><a href="#" title="天涯日志">天涯日志</a></li> <li><a href="#" title="天涯日志">天涯日志</a></li> <li><a href="#" title="天涯日志">天涯日志</a></li> <li><a href="#" title="天涯日志">天涯日志</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:122px;" onmouseover="submenu3.style.display="block"" onmouseout="submenu3.style.display="none"" id="submenu3"> <ul> <li><a href="#" title="电子通信">电子通信</a></li> <li><a href="#" title="电子通信">电子通信</a></li> <li><a href="#" title="电子通信">电子通信</a></li> <li><a href="#" title="电子通信">电子通信</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:203px;" onmouseover="submenu4.style.display="block"" onmouseout="submenu4.style.display="none"" id="submenu4"> <ul> <li><a href="#" title="网路技术">网路技术</a></li> <li><a href="#" title="网路技术">网路技术</a></li> <li><a href="#" title="网路技术">网路技术</a></li> <li><a href="#" title="网路技术">网路技术</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:284px;" onmouseover="submenu5.style.display="block"" onmouseout="submenu5.style.display="none"" id="submenu5"> <ul> <li><a href="#" title="爱在天涯">爱在天涯</a></li> <li><a href="#" title="爱在天涯">爱在天涯</a></li> <li><a href="#" title="爱在天涯">爱在天涯</a></li> <li><a href="#" title="爱在天涯">爱在天涯</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:365px;" onmouseover="submenu6.style.display="block"" onmouseout="submenu6.style.display="none"" id="submenu6"> <ul> <li><a href="#" title="休闲娱乐">休闲娱乐</a></li> <li><a href="#" title="休闲娱乐">休闲娱乐</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> </ul> </div> <div class="submenu" style="display:none;margin-left:446px;" onmouseover="submenu7.style.display="block"" onmouseout="submenu7.style.display="none"" id="submenu7"> <ul> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> <li><a href="#" title="蜗牛在线">蜗牛在线</a></li> </ul> </div> <div id="bottom"></div></body></html>
推荐阅读：

查看原文 >>