永发信息网

给网站在做导航条的时候,如何将二级栏目做成三级栏目,有什么方法步骤?

答案:1  悬赏:0  手机版
解决时间 2021-01-24 23:22
  • 提问者网友:世勋超人
  • 2021-01-24 15:47
给网站在做导航条的时候,如何将二级栏目做成三级栏目,有什么方法步骤?
最佳答案
  • 五星知识达人网友:话散在刀尖上
  • 2021-01-24 16:21
你说的这个和下拉列表是一个含义。所谓的二级导航栏目是我们跟据一级栏目进行细分的。这个就相当于:
1级导航:首页——(动物、植物)
2级导航:动物——(熊猫、灵猫)
3级导航:熊猫——简介、生活习性、地区分布、
按这样的枝叶分下来的。当然,这样比较麻烦,我们可以将css+div和气来运用,用代码显示
css代码片段

*{margin:0;padding:0;border:0;background-repeat:no-repeat;font-size:14px;list-style-type:none;color:#F5F5F5;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
.navgation{width:100%;height:36px;line-height:36px;background:#000;margin:10pxauto;}
.nav{width:960px;height:36px;margin:0auto;}
.navli{float:left;width:130px;border-right:#FFFsolid2px;text-align:center;}
.nav.last{border-right:none;}

html代码片段


  • 首页

  • 动物

  • 植物

  • 下面就是下拉的列表框,也就是平时我们说的二级导航栏目(这里,我们就用熊猫来做下面的下拉列表导航栏目的制作)
  • 熊猫

    • 熊猫首页

    • 简介

    • 生活习性

    • 地区分布



  • css片段
    .nava{display:block}
    .nava:hover{display:block;background:#F00}

    .navul{display:none;}
    .navli:hoverul{display:block;position:absolute;width:130px;top:46px;background:#069;}
    .navli:hoverulli{border-bottom:#99C1pxsolid;border-right:none;}
    我要举报
    如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
    点此我要举报以上问答信息
    大家都在看
    推荐资讯