Web前端之家

时间:2020-01-11 22:28来源:澳洲幸运10平台
那是菜单的原委,用ul标签完结菜单: 复制代码 代码如下: 菜单一 子菜单1 子菜单2 子菜单7 子菜单3 菜单二 子菜单4 子菜单5 子菜单6 那是CSS调控代码: 复制代码 代码如下:ul,ol,li{list-

那是菜单的原委,用ul标签完结菜单: 复制代码 代码如下:

  • 菜单一
    • 子菜单1
    • 子菜单2
      • 子菜单7
    • 子菜单3
  • 菜单二
    • 子菜单4
    • 子菜单5
    • 子菜单6

那是CSS调控代码: 复制代码 代码如下: ul,ol,li{list-style:none;padding:0px;margin:0px;} #menu *{line-height:30px;} #menu a{ text-decoration:none; display:block; } #menu ul{ text-align:left; background:#333; } #menu .arrow{ /* 菜单项的右边手小箭头 */ float:right; padding-right:5px; } #menu>ul{height:30px;} /* 尽管未有菜单项也能保全一级菜单栏的可观。 */ /* 顶尖菜单 */ #menu>ul>li{ text-align:center; display:inline-block; width:80px; } #menu>ul>li>a{color:#fff;} #menu>ul>li:hover{background:#666;} /* 下拉的菜谱栏 */ #menu>ul>li ul{ display:none; width:150px; position:absolute; background:#c1cd94; box-shadow:2px 2px 2px #000; -webkit-box-shadow:2px 2px 2px #000; -moz-box-shadow:2px 2px 2px #123; } /* 下拉菜单的菜系项 */ #menu>ul>li>ul li{padding-left:5px; position:relative;} #menu>ul>li>ul li>a{color:#000;} #menu>ul>li>ul li:hover{background:#d3dbb3;} /* 三级及以下的菜单项的固化 */ #menu>ul>li>ul>li ul{left:150px; top:0px;} 那是JS的调整代码: 复制代码 代码如下: $.ready { /* 菜单早先化 */ $.find('li:has.append(">"State of Qatar; // 为有子菜单的菜单项加多'>'符号 $.bind('mouseover',function(State of Qatar // 一级菜单项的鼠标移入操作 { $.slideDown.bind('mouseleave',function(State of Qatar // 超级菜单项的鼠标移出操作 { $.slideUp; $.bind('mouseover',function(卡塔尔 // 子菜单的鼠标移入操作 { $.slideDown.bind('mouseleave',function(State of Qatar // 子菜单的鼠标移出操作 { $.slideUp;

编辑:澳洲幸运10平台 本文来源:Web前端之家

关键词: