最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

不怎么会css,在制作css纵向菜单时用到区块的隐藏,而在横向菜单中却没用到,很是纳闷,请高人解答_html/css_WEB-ITnose

来源:动视网 责编:小采 时间:2020-11-27 16:04:43
文档

不怎么会css,在制作css纵向菜单时用到区块的隐藏,而在横向菜单中却没用到,很是纳闷,请高人解答_html/css_WEB-ITnose

不怎么会css,在制作css纵向菜单时用到区块的隐藏,而在横向菜单中却没用到,很是纳闷,请高人解答_html/css_WEB-ITnose:先把纵向菜单的导航代码发出来 -------------------------------------------------------- 无标题文档 中国 唐朝 宋朝 汉朝 元朝 明朝 清朝 俄罗斯 彼得大帝 沙皇 叶卡捷莉娜二世 马
推荐度:
导读不怎么会css,在制作css纵向菜单时用到区块的隐藏,而在横向菜单中却没用到,很是纳闷,请高人解答_html/css_WEB-ITnose:先把纵向菜单的导航代码发出来 -------------------------------------------------------- 无标题文档 中国 唐朝 宋朝 汉朝 元朝 明朝 清朝 俄罗斯 彼得大帝 沙皇 叶卡捷莉娜二世 马


先把纵向菜单的导航代码发出来
--------------------------------------------------------




无标题文档







  • 中国

  • 唐朝

  • 宋朝

  • 汉朝

  • 元朝

  • 明朝

  • 清朝



  • 俄罗斯

  • 彼得大帝

  • 沙皇

  • 叶卡捷莉娜二世



  • 马来西亚

  • 美国

  • 印度

  • 日本

  • 泰国

  • 法国





  • ----------------------纵向菜单导航的样式表如下--------------------------------
    #menu ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    body {
    font-family: "新宋体";
    font-size: 12px;
    line-height: 1.5;
    }
    #menu {
    width: 100px;
    border: 1px solid #FFFF66;
    }
    #menu ul li {
    line-height: 26px;
    background-color: #CCCCCC;
    height: 26px;
    border: 1px solid #FF9900;
    position: relative;
    }
    #menu ul li a {
    color: #FF0000;
    text-decoration: none;
    width: 100px;
    }
    #menu ul li a:hover {
    color: #00FF00;
    width: 100px;
    background-color: #0000FF;
    }

    #menu ul li:hover {
    background-color: #99FF66;
    }
    #menu ul li ul {
    display: none;
    border: 1px solid #FFFF99;
    position: absolute;
    width: 100px;
    left: 100px;
    top: 0px;
    }
    #menu ul li:hover ul {
    display: block;
    }
    a:hover {
    background-color: #3300FF;
    }
    ---------------------------------------------------------------
    可以看到标红的地方用了隐藏,也就是说不划过的话就不显示,那么这个可以理解
    下面再来看看横向菜单的全部代码-----------------------------------------




    菜单演示





  • 产品介绍

  • 产品?

  • 产品?

  • 产品?

  • 产品?






  • --------------------------------------------可以看到横向菜单样式中并没有将任何部分隐藏,当在页面打开的时候二级菜单是隐藏的啊,很奇怪,纵向菜单是将ul定义成了块,而横向菜单是将a定义成了块,难道说将a定义为块就不用设置隐藏吗,而且我在横向菜单中试图将二级ul定义为隐藏的时候,当鼠标划过一级菜单的时候却没了反应,也就是说二级菜单彻底隐藏了,是不是说这个隐藏具有继承性呢。请相关的高手解答下哈,谢谢


    回复讨论(解决方案)

    横向时确实没有隐藏,只是你看不见而已

    #nav li ul {line-height:27px; list-style-type:none; text-align:left; left:-999em; width:180px; position:absolute;}

    看到left:-999em;了吗,默认情况下是在页面显示区域之外的。
    #nav li:hover ul {left:auto;}

    鼠标经过时把left恢复到了默认位置,所以就出现了。

    当然还是建议你用隐藏,因为当前情况下-999肯定再页面外面,可要是你的ul本身就离左边999的话,就会出现在页面左上角了

    嗯,谢谢了,还真不知道-999em是这个意思呢

    文档

    不怎么会css,在制作css纵向菜单时用到区块的隐藏,而在横向菜单中却没用到,很是纳闷,请高人解答_html/css_WEB-ITnose

    不怎么会css,在制作css纵向菜单时用到区块的隐藏,而在横向菜单中却没用到,很是纳闷,请高人解答_html/css_WEB-ITnose:先把纵向菜单的导航代码发出来 -------------------------------------------------------- 无标题文档 中国 唐朝 宋朝 汉朝 元朝 明朝 清朝 俄罗斯 彼得大帝 沙皇 叶卡捷莉娜二世 马
    推荐度:
    标签: 制作 菜单 隐藏
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top