【发布时间】：2013-11-26 13:35:59
【问题描述】：
我搜索了这个并玩弄了 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;
}
非常感谢各位！请友好一点。我是菜鸟！
编辑 一个问题导致另一个问题！
我在页眉中溢出的原因是因为即使我有 width:100% 的页面底部（水平）有一个滚动条，可以让我滚动到空白空间。
当我溢出时：隐藏；在标题中，解决了该问题，但随后隐藏了我的导航栏子菜单。
我试图做overflow-x:hidden;溢出-y：可见，但我猜将Y-可见与X-隐藏结合起来是错误的，它只是读作“自动！”
无论如何要同时拥有 NO X 滚动和 NO 隐藏 Y 子菜单？ 谢谢各位。。
【问题讨论】：