Question

在你说什么之前，我看了，所以我要么错过这样的帖子，要么它不重复，请记住，因为这对大多数溢出问题都是类似的问题......

好吧，所以我的问题是我做了一个下拉导航，当然它使用了列表，浮动到左边并将它对齐....我可以使用溢出：隐藏在身体上，继续工作桌面很好，但不是移动（当然我会改变悬停等以后移动到javascript onclick），所以我有一个想法，将它全部嵌入div，设置为100％宽度/高度，理论上应该工作，对？好吧它没有，我已经创建了一个隐藏溢出的类，在我的导航背景上工作div，但在背景导航之前不在单独的div中，代码在下面。

＆＃13;

/*gradient behind the navigation*/
#nav_grad {
  background: linear-gradient(#ffff00, #CCCC00); 
	position:absolute; 
	left:0%; 
	top:0%; 
	height:70px; 
	width:100%; 
	z-index:0; 
}

/*Navigation is indexed to be infront of background and the main content above^^^*/
.nav { 
	position:relative;
	left:60%;
	top:20%;
}

/*Removes margins and padding*/
ul {
 margin: 0px;
 padding: 0px;
}

/*nav bar design*/
ul li {
 float: left; 
 width: 7%; 
 height: 40px; 
 opacity: 0.9; 
 line-height: 40px; 
 text-align: center; 
 font-size: 90%; 
 padding-right: 3%;
 padding-left: 3%;
 list-style: none;
 margin: 0px;
}

/*links design for nav bar*/
ul li a {
 text-decoration: none; 
 color: black;
 font-style: bold;
 font-weight: 800;
 display: block;
}
/*Text of drop navigation when you hover hover*/
ul li a:hover {
 color:#999999;
 opacity:1;
}

/*by default nothing will be displayed until you hover*/
ul li ul li{
 display: none;
}

/*Drop down when you hover*/
ul li:hover ul li {
 display: block;
 margin-left: -20%;
 width: 140%;
 background-color: #5555ff;
}

/*prevents overflow (WELL MEANT TO)*/
.nav_container {
	width:100%;
	height:70px;
	overflow:hidden;
}

/*When I hover the idea is to make the div so drop down can be seen on Y axis, still keeping overflow on the x*/
.nav_container:hover {
	height:100%;
}

/*creates a div in the center of the screen for all the content, indexed to be behind navigation bar but in front of the background*/
#content { 
	position:absolute; 
	left:25%; 
	top:15%; 
	height:84.4%; 
	width:50%; 
	background-color: #ffffff; 
	border: 2px solid black;
  border-radius: 0px;
	z-index:-1; 
	overflow: auto;
}

/*If screen is under 860 pixels below will happen*/
@media only screen and (max-width: 860px){
  .nav {
	  position:relative;
		left:55%;
		top:20%;
  }
	
	ul li:hover ul li {
		display: block;
		margin-left: -40%;
		width: 180%;
		background-color: #5555ff;
	}
    
  #nav_grad {
    background: linear-gradient(#ffff00, #CCCC00); 
	  position:absolute; 
	  left:0%; 
	  top:0%; 
	  height:50px; 
	  width:100%; 
	  z-index:0; 
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="nav_container"> <!--Here is the div that should control drop down list overflow-->

	<!--Linear gradient div is behind navigation-->
	<div id="nav_grad" style="text-align:center;">
		<!--navigation-->
		<div class="nav">
			<ul>
				<li><a href="">Hover</a>
					<ul>
						<li><a href="one.html">Page 1</a></li>
						<li><a href="two.html">Page 2</a></li>
						<li><a href="three.html">Page 3</a></li>
						<li><a href="four.html">Page 4</a></li>
						<li><a href="five.html">Page 5</a></li>
					</ul>
				</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="contact.html">Information</a></li>
			</ul>		
		</div>
	</div>
</div>
	
<div id="content" style="text-align:center;">
	<table style="border-collapse: separate; border-spacing: 20px;">
		<tr>
			<td align="center">	
				This is main content div, indexed BEFORE my navigation.
			</td>		
	</table>
</div>
</body>
</html>

＆＃13;

几个星期以来一直困扰着我，可能是一个简单的解决办法，但却无法想到。任何输入都是受欢迎的...希望有人知道如何排序这个烦人的问题：P

Answer 1

试试这个

/*gradient behind the navigation*/
#nav_grad {
  background: linear-gradient(#ffff00, #CCCC00); 
	position:absolute; 
	left:0%; 
	top:0%; 
	height:70px; 
	width:100%; 
	z-index:0; 
}

/*Navigation is indexed to be infront of background and the main content above^^^*/
.nav { 
	position: relative;
left: 60%;
top: 20%;
float: left;
width: 40%;
}

/*Removes margins and padding*/
ul {
 margin: 0px;
 padding: 0px;
display: flex;
width: 100%;
}

/*nav bar design*/
ul li {
 float: left; 
 width: inherit; 
 height: 40px; 
 opacity: 0.9; 
 line-height: 40px; 
 text-align: center; 
 font-size: 90%; 
 padding-right: 3%;
 padding-left: 3%;
 list-style: none;
 margin: 0px;
}
ul li ul{
 display: block;
}
/*links design for nav bar*/
ul li a {
 text-decoration: none; 
 color: black;
 font-style: bold;
 font-weight: 800;
 display: block;
}
/*Text of drop navigation when you hover hover*/
ul li a:hover {
 color:#999999;
 opacity:1;
}

/*by default nothing will be displayed until you hover*/
ul li ul li{
 display: none;
}

/*Drop down when you hover*/
ul li:hover ul li {
 display: block;
 margin-left: -20%;
 width: 140%;
 background-color: #5555ff;
}

/*prevents overflow (WELL MEANT TO)*/
.nav_container {
	width:100%;
	height:70px;
	overflow:hidden;
}

/*When I hover the idea is to make the div so drop down can be seen on Y axis, still keeping overflow on the x*/
.nav_container:hover {
	height:100%;
}

/*creates a div in the center of the screen for all the content, indexed to be behind navigation bar but in front of the background*/
#content { 
	position:absolute; 
	left:25%; 
	top:15%; 
	height:84.4%; 
	width:50%; 
	background-color: #ffffff; 
	border: 2px solid black;
  border-radius: 0px;
	z-index:-1; 
	overflow: auto;
}

/*If screen is under 860 pixels below will happen*/
@media only screen and (max-width: 860px){
  .nav {
	  position:relative;
		left:55%;
		top:20%;
  }
	
	ul li:hover ul li {
		display: block;
		margin-left: -40%;
		width: 180%;
		background-color: #5555ff;
	}
    
  #nav_grad {
    background: linear-gradient(#ffff00, #CCCC00); 
	  position:absolute; 
	  left:0%; 
	  top:0%; 
	  height:50px; 
	  width:100%; 
	  z-index:0; 
  }
}

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="nav_container"> <!--Here is the div that should control drop down list overflow-->

	<!--Linear gradient div is behind navigation-->
	<div id="nav_grad" style="text-align:center;">
		<!--navigation-->
		<div class="nav">
			<ul>
				<li><a href="">Hover</a>
					<ul>
						<li><a href="one.html">Page 1</a></li>
						<li><a href="two.html">Page 2</a></li>
						<li><a href="three.html">Page 3</a></li>
						<li><a href="four.html">Page 4</a></li>
						<li><a href="five.html">Page 5</a></li>
					</ul>
				</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="contact.html">Information</a></li>
			</ul>		
		</div>
	</div>
</div>
	
<div id="content" style="text-align:center;">
	<table style="border-collapse: separate; border-spacing: 20px;">
		<tr>
			<td align="center">	
				This is main content div, indexed BEFORE my navigation.
			</td>		
	</table>
</div>
</body>
</html>

Answer 2

从left:60%移除nav class，它为div滚动

.nav { 
    position:relative;
    /*left:60%;*/
    left: 0;
    top:20%;
}

你可以对所有身体使用overflow hidden

body{
    overflow: hidden;
}

Answer 3

/*gradient behind the navigation*/
#nav_grad {
  background: linear-gradient(#ffff00, #CCCC00); 
    position:absolute; 
    left:0%; 
    top:0%; 
    height:70px; 
    width:100%; 
    z-index:0; 
}

/*Navigation is indexed to be infront of background and the main content above^^^*/
.nav { 
    position:relative;
    left:60%;
    top:20%;
}

/*Removes margins and padding*/
ul {
 margin: 0px;
 padding: 0px;
}

/*nav bar design*/
ul li {
 float: left; 
 width: 7%; 
 height: 40px; 
 opacity: 0.9; 
 line-height: 40px; 
 text-align: center; 
 font-size: 90%; 
 padding-right: 3%;
 padding-left: 3%;
 list-style: none;
 margin: 0px;
}

/*links design for nav bar*/
ul li a {
 text-decoration: none; 
 color: black;
 font-style: bold;
 font-weight: 800;
 display: block;
}
/*Text of drop navigation when you hover hover*/
ul li a:hover {
 color:#999999;
 opacity:1;
}

/*by default nothing will be displayed until you hover*/
ul li ul li{
 display: none;
}

/*Drop down when you hover*/
ul li:hover ul li {
 display: block;
 margin-left: -20%;
 width: 140%;
 background-color: #5555ff;
}

/*prevents overflow (WELL MEANT TO)*/
.nav_container {
    width:100%;
    height:70px;
    overflow:hidden;
}

/*When I hover the idea is to make the div so drop down can be seen on Y axis, still keeping overflow on the x*/
.nav_container:hover {
    height:100%;
}

/*creates a div in the center of the screen for all the content, indexed to be behind navigation bar but in front of the background*/
#content { 
    position:absolute; 
    left:25%; 
    top:15%; 
    height:84.4%; 
    width:50%; 
    background-color: #ffffff; 
    border: 2px solid black;
  border-radius: 0px;
    z-index:-1; 
    overflow: auto;
}

/*If screen is under 860 pixels below will happen*/
@media only screen and (max-width: 860px){
  .nav {
      position:absolute;
        left:40%;
        top:20%;
  }

    ul li {
 float: left; 
 width: 7%; 
 height: 40px; 
 opacity: 0.9; 
 line-height: 40px; 
 text-align: center; 
 font-size: 90%; 
 padding-right: 20%;

 list-style: none;
 margin: 0px;
}

    ul li:hover ul li {
        display: block;
        margin-left: -40%;
        width: 400%;
        background-color: #5555ff;
    }

  #nav_grad {
    background: linear-gradient(#ffff00, #CCCC00); 
      position:absolute; 
      left:0%; 
      top:0%; 
      height:50px; 
      width:100%; 
      z-index:0; 
  }
}

Answer 4

然后在DIV上使用position:absolute;，在那里你试图限制你的视野范围，在你的情况下.nav_container{}，因为一切都有字符串，没有什么是那么简单。你需要为自己找到一个合适的组合。没有冒犯，但你的造型对我来说绝对没有意义，除非它纯粹用于测试目的。一切都必须有一个正确的顺序，你需要知道何时使用溢出，何时不需要。你需要知道何时使用绝对位置，何时不知道。您需要知道何时使用DIV以及何时使用UL和LI。您需要知道何时使用CLASS以及何时使用ID。在你的情况下，一切看起来都是随机的。

溢出：隐藏;不适用于嵌套div

4 个答案: