学做网站培训课程介绍

当前位置：

网站三级、四级下拉菜单的制作方法（附代码）

在一些门户网站上，由于项目众多，不可能全部将这些项目显示在主导航上，就可以通过二级菜单，三级导航，甚至四级导航来显示。
网站三级菜单、四级菜单制作

如何在自己做网站时，制作三级菜单，四级菜单呢，都可以通过DIV+CSS的方式去制作，只需简单三步就可以制作出完美的网站三级，四级导航菜单。

方法/步骤

  1. 首先将以下的CSS样式，复制到自己网站的CSS文件中，放在特别下放。
    /*四级菜单导航CSS*/
    ul{padding:0px;}
    .menu{
    position:relative;
    width:960px;
    height:40px;
    background-color:#fff;
    margin-top:5px;
    margin-bottom:5px;
    }
    .menu ul{list-style-type:none;}
    .menu li{float:left;position:relative;width:91px;text-align:center;margin-left:5px;}
    .menu ul ul{
    visibility:hidden;
    position:absolute;
    left:3px;
    top:40px;
    }
    .menu ul ul ul{visibility:hidden;position:absolute;left:122px;top:0px;}
    .menu table{position:absolute;top:0;left:0;}
    .menu ul li:hover ul,.menu ul a:hover ul{visibility:visible;}
    .menu a{display:block;background:#46537C;padding:2px 10px;color:#fff;text-decoration:none;border:1px solid #46537C;height:35px;line-height:35px;}
    .menu a:hover{
    color:#fff;
    background-color: #F00;
    }
    .menu ul ul li{clear:both;text-align:left;margin-top:2px;}
    .menu ul ul li a{display:block;width:100px;height:15px;height:35px;}
    .menu ul ul li a:hover{background: #F00;}
    .menu ul ul ul li a{clear:both;text-align:left;}
    .menu ul li:hover ul{visibility:visible;}
    .menu ul a:hover ul{
    visibility:visible;
    /*一级的li，a的hover时，设置二级菜单可见*/
    }
    .menu ul :hover ul ul{
    visibility:hidden;
    /*一级的li，a的hover时，设置二级,三级菜单隐藏*/
    }
    .menu ul :hover ul :hover ul ul{
    visibility:hidden;
    /*一级和二级的li，a的hover时，设置三级和四级级菜单隐藏*/
    }
    .menu ul :hover ul :hover ul{
    visibility:visible;
    /*一级二级菜单hover时，设定3级菜单可见*/
    }
    .menu ul :hover ul :hover ul :hover ul{
    visibility:visible
    /*一级二级三级hover时，设置四级菜单可见*/
    }
    .menu ul ul ul a{background:#46537C;}
    .menu ul ul ul a:hover{background:#F00;}
    .menu ul ul ul ul a{background:#46537C;}
    .menu ul ul ul ul a:hover{background: #F00;}
  2. 在需要显示网站菜单的地方，放置以下的HTML代码：
    <div class="menu">
    <ul>
    <li><a href="<?php echo get_option('home'); ?>">网站首页</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">论坛介绍
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <!--三级子菜单-->
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">论坛简介</a></li>
    <!--三级结束-->
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">计师介绍</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">视频新闻</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">上级要闻</a></li>
    </ul>
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">学校概况
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">学校简介</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">领导班子</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">学校荣誉</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教师荣誉</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">校务公开
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">工作计划</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">部门计划</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">立章建制</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">班规班约</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教学科研
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教学沙龙</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教学争锋</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">课题研究</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">教研论文</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">资源共享
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <!--三级子菜单-->
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">实用案例
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">语文</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">数学</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英语</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">科学</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">音体美</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <!--三级结束--><li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">套餐教案
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">语文
    <!--四级菜单开始-->
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年级</a></li>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">数学
    <!--四级菜单开始-->
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年级</a></li>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英语
    <!--四级菜单开始-->
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年级</a></li>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">科学
    <!--四级菜单开始-->
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年级</a></li>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">音体美
    <!--四级菜单开始-->
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">一年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">二年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年级</a></li>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <!--四级子菜单结束-->
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">特色课件
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">语文</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">数学</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">英语</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">科学</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">音体美</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li><li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">软件下载</a>
    </ul>
    </li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">党务工会
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">支部活动</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">职工论坛</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">名校工程</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">名师工程</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <!--结束--><li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">阳光少年
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">德育专题</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">班队活动</a></li>
    <!--三级子菜单-->
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">墨香文学
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">三年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">四年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">五年级</a></li>
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">六年级</a><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    <!--四级子菜单结束-->
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <!--三级结束-->
    <li><a href="<?php echo get_option('home'); ?>" _fcksavedurl="#">龙虎榜单</a></li>
    </ul>
    </li><li><a href="<?php echo get_option('home'); ?>">一周进程</a></li>
    <li><a href="<?php echo get_option('home'); ?>">招聘招生</a></li>
    </ul>
    </div>
  3. 通过修改代码中的文字成为自己网站需要的导航名称即可。

以上是通过固定的代码来制作网站的三级、四级菜单，我们也可以使用动态调用的方式来制作网站三级、四级下拉菜单。方法见【wordpress下拉菜单制作】。

类似功能

发表评论

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

相关教程

  • 网站三级、四级下拉菜单的制作方法（附代码） 图文教程 (138527 次浏览)
    在一些门户网站上，由于项目众多，不可能全部将这些项目显示在主导航上，就可以通过二级菜单，三级导航，甚至四级导航来显示。如何在自己做网站
  • 网站二级、三级联动选择制作方法（附JS Select联动代码 ） 图文教程 (19611 次浏览)
    什么是网站二级、三级联动选择二级、三级联动选择简单的说就是一层一层的选择，例如一些商城网站制作里，用户在选择衣服时，先选择品牌，再选择这
  • 如何在网站上制作下拉菜单 图文教程 (130001 次浏览)
    在学做网站时，网站导航上经常有下拉菜单，这样可以在有限的导航上呈现出更多的栏目。如何在做网站时，能够制作出下拉菜单呢？【相关知识：如
  • 织梦二级导航制作 DEDE下拉菜单制作方法 图文教程附件下载 (134910 次浏览)
    在制作DEDECMS织梦网站的模板和学习仿站教程时，特别头痛的莫过于去制作网站的多级菜单导航了，很多时候制作出来的下拉菜单导航很多都会移位，使用固
  • Dreamweaver跳转菜单制作 视频教程 (1123838 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • Wordpress导航调用二级子菜单 图文教程 (121584 次浏览)
    在学做网站论坛的VIP课程中，我们讲了做网站时，我们网站的导航是调用一级分类和页面，可往往为了一些需要，登录制作wordpress下拉菜单，要求调用某个
  • Wordpress前台游客投稿功能制作方法（纯代码） 图文教程 (114727 次浏览)
    纯代码Wordpress前台投稿功能制作方法，很多建网站学员学习了Wordpress教程后，使用Wordpress 程序建了网站。但如果每天都是自己更新文章，感觉会有点
  • 网站对联广告的制作方法 图文教程 (126331 次浏览)
    很多网站都有对联广告，当我们打开它的网站的时候，会在屏幕的两边自动的出现二个对联广告，显的很醒目。网站对联广告对于做cpa,cps的朋友有很大
  • 如何制作网站轮播图（网页图片轮播幻灯片代码分享） 图文教程 (135743 次浏览)
    各位同学大家好，我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间，对我的辅导帮助。现在在这里我想给同学做分享一
  • 网页设计学习必备：颜色名称和HTML代码对照表 (125198 次浏览)
    学做网站时，经常要修改代码，很多时候需要用到颜色代码，由于太多，不可能都记住，所以找到了一个带有中文颜色名称表示的颜色代码表，以便后期网页设

建站培训课程

最新教程

其它教程