Question

我搜索了这个并玩弄了Z轴的东西，但无济于事。基本上，我的导航栏的子菜单显示在它下面的div下面。那个div有一个不透明的东西，它必须与它有关。我需要这些显示在div上面！

JS小提琴：http://jsfiddle.net/Peege151/7gGJp/1/

我要求扩展您的浏览器，以便导航栏全部在一行。

这是我的HTML代码：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="style.css" type="text/css" rel="stylesheet" />

    <title></title>
</head>
<body style="overflow-x: hidden;scrolling:no;">
    <div id="header"> 
      <div id="searchcontainer">
          <div id="searchlinks">
              <p><a href="###">Full Suite of Services</a> | <a href="###contact">Contact Us</a></p>   
          </div> 
        <div id="searchform">
            <form  action ="##">
                Search Site: <input type="search" style="border-radius: 10px;">
                <input type="image" src="images/search.png" style="height:20px; width:20px;      position:relative;top:5px;">
            </form>
            <br>
        </div>
       </div>
        <div id="navbar">
            <ul id="nav">
                <li> Home </li>
                <li>Services 
                    <ul>
                        <li> Full Suite of Services </li>                  
                    </ul>
                </li>   
                <li> <a href="case_studies/index"> Case Studies</a> 
                    <ul>    
                        <li><a href="case_studies/thing1"> Thing1</a> </li>
                        <li><a href="case_studies/thing2">Thing2 </a> </li>
                        <li><a href="case_studies/thing3"> Thing3 </a></li>
                    </ul>
                </li>
                <li>Partners 
                    <ul>
                        <li> Guy1</li>
                        <li> TOP HALF OF NAME!!! OMG </li>
                    </ul>
                </li>
                <li>Contact Us</li>
            </ul>
        </div>
    </div>
    <div id="division"></div>

    <div id="intro" class="overlay">
    </div> 
    <div id="biocontactwrap">
        <div id="biotext"></div>
        <div id="contact_pat"> </div>

    </div>
    <div id="quote">
    </div>
    <?php
    // put your code here
    ?>
</body>
</html>

这是我的CSS：

/* 
    Document   : style
    Created on : Nov 12, 2013, 11:51:06 AM
    Author     : ShiftedRec
    Description:
        Purpose of the stylesheet follows.
*/
body {
    background-image: url(images/wall1.gif);
        width:100%;
        margin:0;
        padding:0;
        overflow-x:hidden;


}
root { 
    display: block;
}

#header {
    height:150px;
    width:100%;  
    clear:both;
    overflow:hidden;
}

#searchcontainer{
    width:305px;
    height:60px;
    float:right;
    position:relative;bottom:20px;
}
#searchlinks {
    clear:right;
    float:right;
    width:300px;
    position:relative;top: 10px; left:80px;
    font-size:50%;



}
#searchlinks a{
   font-size:50%;

}
#searchform {
    float:right;
    clear:left;
    width:300px;
    clear:left;
}
.clear{
    clear:both;
}
#navbar {
    float:right;
    margin-right:10%;
    width:50%;
    text-align: right;
    clear:right;

}
#navbar ul{ 
    padding: 0 10px;
    list-style: none;
    position: relative;
    display: inline-table;
        overflow:visible;
}
#navbar ul li {
    position:relative;
   display: inline-block

}
#navbar ul ul{
    display:none; 
    position:absolute;
    top:1em;
    left:0
}
#navbar ul > li:hover ul {
    display:inline-table;
    margin:0;
    overflow:visible;
    z-index: 4;
}
#navbar ul li:hover {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#navbar ul li ul li {
    display:block;
}
#navbar li {
    display: inline-block;
    margin: 10px;  
    white-space: nowrap;
}

#division {
    height:15px;
    background-color:#9E0000;
    overflow:visible;
}
#intro{
    height:200px;
    width:100%;
    z-index: 1;

}
#biocontactwrap {
      width:100%;
      height: 600px;
          margin-bottom: 10px

}
.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: relative;top:300px;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, .1); /*can be anything, of course*/
    box-shadow: 0px 9px 9px rgba(0,0,0.9,0.95);
}
#biotext {
    margin-left:15%;
    width:40%;
    height:100%;
    padding:0px;
    border: solid blue;
    float:left;
}
#contact_pat{
    width:25%;
    height:100%;
    border: solid yellow;
    float: right;
    margin-right:15%
}
#quote {
    width:100%;
    background-color:blue;
    height: 300px;
}

非常感谢你们！请友好一点。我是个noobie！

修改一个问题导致另一个问题！

我在标题中溢出的原因是因为即使我有宽度：100％页面底部有一个滚动条（水平），这样我就可以滚动到空白区域。

当我溢出时：隐藏;在标题中，解决了这个问题但随后隐藏了我的导航栏子菜单。

我试着做溢出-x：隐藏; overflow-y：可见，但是Y-visible与X-hidden相结合，我猜错了它只是读作“auto！”

无论如何既有NO X滚动也没有隐藏Y子菜单？谢谢你们..

Answer 1

这是因为 #header 中的溢出：隐藏; 。删除它，将显示导航。

导航栏的子菜单出现在另一个Div下面

1 个答案: