如何在网站上制作下拉菜单

在学做网站时，网站导航上经常有下拉菜单，这样可以在有限的导航上呈现出更多的栏目。

如何在做网站时，能够制作出下拉菜单呢？【相关知识：如何制作wordpress下拉菜单】

网站制作下拉菜单的步骤如下：

1. 在网站的CSS样式中加入以下的CSS代码：
   body{margin:0px; padding:0px; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#FFF; background:url(/jscss/demoimg/201303/tittlePicture.png) no-repeat;}
   body a{color:#FFF;}
   .box{margin:240px auto; padding:0px; width:1000px;}
   .box ul{margin:0px; padding:0px; list-style:none;}
   .box ul li{margin:0px 2px 0px 0px; padding:0px; width:120px; height:35px; display:inline; float:left; background:url(/jscss/demoimg/201303/zk.png) no-repeat 0 0; border-radius:4px; box-hadow:#000 0px 0px 1px;}
   .box ul li:hover ul{display:block;}
   .box ul li a{text-align:center; width:121px; height:37px; line-height:35px; display:block; text-ecoration:none;}
   .box ul li ul{display:none;}
   .box ul li ul li{margin:0px 0px 2px 0px; padding:0px; background:url(/jscss/demoimg/201303/zkTwo.png) no-repeat;}
   .box ul li ul li:hover{background:#666;}
   .box ul li ul li:hover ul{visibility:visible;}
2. 在网站导航栏的DIV上，粘贴以下代码，就可以实现在网站上显示下拉菜单：
   <div class="box">
   <ul>
   <li><a href="#">源码爱好者</a>
   <ul>
   <li><a href="#">Two-level menu</a></li>
   <li><a href="#">技术文章</a></li>
   <li><a href="#">源码下载</a></li>
   <li><a href="#">Two-level menu</a></li>
   <li><a href="#">Two-level menu</a></li>
   </ul>
   </li>
   </ul>
   </div>