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">
<!--
body{
   margin-top:0px;
   margin-bottom:0px;
   margin-left:auto;
   margin-right:auto;
   background:#fff;
   text-align:center;
   color: #333;
   font-family:arial,verdana,sans-serif;
}

#topbanner{
   margin-left:auto;
   margin-right:auto;
   width:580px;
   height:40px;
   border-bottom:5px solid #ff9900;
}

#bottom{
   margin-left:auto;
   margin-right:auto;
   width:580px;
   height:40px;
   border-top:5px solid #ff9900;
}

/*菜单样式定义*/
#menu{
   clear:both;
   margin-right: auto;
   margin-left: auto;
   width:580px;
   height:24px;
   color:#fff;
   background-color:#900;
}

/*主菜单样式定义*/
.mainmenu{
   float:left;
   width:64px;
   font-size:13px;
   color:#fff;
   border-left:1px solid #999;
}

.menucontent{
   float:left;
   width:80px;
   height:20px;
   color:#fff;
   padding-top:4px;
}

.menucontent a:link {
   color: #fff;
   display:block;
   text-decoration: none;
}

.menucontent a:visited {
   color: #fff;
   display:block;
   text-decoration: none;
}

.menucontent a:hover {
   color: #fff;
   text-decoration: none;
   background-color:#000;
}

/*子菜单样式定义*/
.submenu{
   clear:both;
   float:left;
   position:absolute;
   width:80px;
   padding:0px;
   font-size:13px;
}

.submenu ul {
   background-color:#eee;
   list-style-type:none;
   width:82px;
   line-height:24px;
}

.submenu li {
   border-bottom: #ccc 1px dotted;
}

.submenu li a:link,a:visited {
   color: #333;
   display: block;
   text-decoration: none;
}

.submenu li a:hover {
   color: #fff;
   text-decoration: none;
   background-color:#900;
   border-top:1px solid #fff;
}
-->
</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>
 posted on 2007-02-05 14:37  清一  阅读(6245)  评论(2)  编辑  收藏  举报