Html 导航栏的子菜单显示在另一个Div下面_Html_Css_Z Index_Opacity

Html 导航栏的子菜单显示在另一个Div下面

html css

Html 导航栏的子菜单显示在另一个Div下面,html,css,z-index,opacity,Html,Css,Z Index,Opacity,我搜索了这个，玩弄了Z轴的东西，但是没有用。基本上，导航栏的子菜单显示在它下面的div下面。那个div有一个不透明的东西，这一定和它有关。我需要这些来显示上面的div JS小提琴：我要求您扩展浏览器，使导航栏都在一条线上以下是我的HTML代码： <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="style.css" typ

我搜索了这个，玩弄了Z轴的东西，但是没有用。基本上，导航栏的子菜单显示在它下面的div下面。那个div有一个不透明的东西，这一定和它有关。我需要这些来显示上面的div

JS小提琴：

我要求您扩展浏览器，使导航栏都在一条线上

以下是我的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>

非常感谢各位！请友善点。我是个傻瓜

编辑一个问题导致另一个问题

我之所以在页眉中出现溢出，是因为即使我有宽度：100%页面底部有一个滚动条（horiz），允许我滚动到空白处

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

我试着做溢出-x:hidden；overflow-y：可见，但是将y-visible与X-hidden结合起来，我想是被窃听了，它只是读作“自动！”

不管怎样，都没有X滚动和隐藏的Y子菜单？

谢谢大家。

这是因为溢出：隐藏在#标题中。删除它，将显示导航。

对不起，Alex，它一开始解决了问题，但后来我意识到我有溢出：隐藏是有原因的。-出于某种原因，我的页面上有一个水平滚动条，我想删除它。所以我做了溢出：隐藏来解决这个问题。如果我能做overflow-x:hidden，overflow-y:visible，那就太好了，但那不行！删除溢出：从#头隐藏，因为它毫无意义。出现水平滚动是因为剩下的#searchlinks:80px。把它也去掉，它应该会工作。还有一个提示，不要使用CSS内联，在CSS样式表中移动它这里有一个提琴帮助您删除不必要的代码。您还可以删除其他代码，因为它没有帮助，但可能会造成阻碍（例如在许多地方使用宽度：100%）。坚持下去，你会发现随着时间的推移和练习，它会变得越来越好。当做

/* 
    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;
}