Before you say anything, I looked, so I either missed the post like this or it's not a duplicate, keep in mind as this will seem similar problem to most overflow problems...
Okay, so my problem is that I have made a drop down navigation, of course it's using lists, floats to left and aligned it right.... I can use overflow:hidden on body, works on desktop fine but not mobile (of course I will change hover etc later to a javascript onclick for mobile), so I had an idea, nest it all in a div, set it to 100% width/height, should work in theory, right? Well it did not, I have made a class to hide overflow, works on the div with the background for my navigation, but NOT in a separate div before the background navigation, code is below.
/*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;
}
}<!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>Been bugging me for weeks, probably an easy fix, but can't think of one. Any input is welcome... Hope someone knows how to sort this annoying problem :P
.nav { left: 60%;it's work fine