学做网站培训课程介绍

当前位置:

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

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

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

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在学做网站时,网站导航上经常有下拉菜单,这样可以在有限的导航上呈现出更多的栏目。如何在做网站时,能够制作出下拉菜单呢?【相关知识:如
  • 在制作DEDECMS织梦网站的模板和学习仿站教程时,特别头痛的莫过于去制作网站的多级菜单导航了,很多时候制作出来的下拉菜单导航很多都会移位,使用固
  • 在一些门户网站上,由于项目众多,不可能全部将这些项目显示在主导航上,就可以通过二级菜单,三级导航,甚至四级导航来显示。如何在自己做网站
  • Dreamweaver跳转菜单制作 视频教程 (1123733 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。