如何在网站上制作下拉菜单
在学做网站时,网站导航上经常有下拉菜单,这样可以在有限的导航上呈现出更多的栏目。
如何在做网站时,能够制作出下拉菜单呢?【相关知识:如何制作wordpress下拉菜单】
网站制作下拉菜单的步骤如下:
- 在网站的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;} - 在网站导航栏的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>