全部栏目

首页 旅游资讯 线路攻略 景点大全 国内游 境外游 美食特产
您的当前位置：首页正文

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

2020-11-27 来源：尚车旅游网

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




无标题文档







  • 中国

  • 唐朝

  • 宋朝

  • 汉朝

  • 元朝

  • 明朝

  • 清朝



  • 俄罗斯

  • 彼得大帝

  • 沙皇

  • 叶卡捷莉娜二世



  • 马来西亚

  • 美国

  • 印度

  • 日本

  • 泰国

  • 法国





    • ----------------------纵向菜单导航的样式表如下--------------------------------
    #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是这个意思呢

    显示全文