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

2018-11-01    来源:学做网站论坛

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

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

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

如何在做网站时,能够制作出下拉菜单呢?【相关知识:如何制作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>

标签: isp 代码 网站制作

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:wordpress网站友情链接首页显示

下一篇:如何制作WordPress网站的上一篇、下一篇