After spedning hours perfecting my dropdown menu and then getting my main holding all my text, the container holdding my main text is now appearing on top of everything. I want my drop down menu items to appear on top of everything else. As an asside, i made the text inside my container for the main area overflow: auto and made the container have overflow: hidden. It got rid of the bottom scroll bar but is there a way of hidding the vertical scroll bar? Here is the HTML and CSS pertaining to my particular problem.
html {
height: 100%;
min-height: 100%;
}
body {
margin: 0px;
}
#header {
position: fixed;
width: 100%;
margin: 0px;
background: rgba(67, 69, 76, 0.87);
padding: 30px;
text-shadow: 5px 5px 5px #000000;
text-align: center;
color: white;
}
#header h1 {
position: center;
padding: 0px;
margin: 0px;
}
#menu-bar {
position: fixed;
top: 97px;
width: 100%;
}
#menu-bar ul {
width: 100%;
background: rgba(30, 51, 74, 0.74);
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
}
#menu-bar ul a {
display: block;
color: white;
text-decoration: none;
font-weight: 700;
font-size: 12px;
line-height: 40px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#menu-bar ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#menu-bar ul li:hover {
background: rgb(90, 42, 0);
}
#menu-bar ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: rgb(32, 42, 60);
}
#menu-bar ul ul li {
float: none;
}
#menu-bar ul ul a {
line-height: 120%;
padding: 10px;
}
#menu-bar ul ul ul {
top: 0;
left: 100%
}
#menu-bar ul li:hover > ul {
display: block;
background: rgb(32, 42, 60);
}
#section {
background-color: grey;
color: black;
width: 50%;
height: 66%;
float: right;
padding: 50px;
overflow: hidden;
position: fixed;
top: 160px;
right: 30%;
}
#scroll {
overflow: auto;
height: 100%;
}
#footer {
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
background: rgb(25, 25, 62);
background: rgba(25, 25, 62, 0.6);
color: white;
text-align: center;
padding: 5px;
}
strong {
color: #FF3399;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>
Site Title
</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div id="header">
<h1>
Site Header
</h1>
</div>
<!--Drop-Down Nav-bar-->
<div id="menu-bar">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
1
</a>
<ul>
<li>
<a href="#">
1-1
</a>
</li>
<li>
<a href="#">
1-2
</a>
</li>
</ul>
</li>
<li>
<a href="#">
2
</a>
<ul>
<li>
<a href="#">
2-1
</a>
</li>
</ul>
</li>
<li>
<a href="#">
3
</a>
<ul>
<li>
<a href="#" target="_blank">
3-1
</a>
</li>
<li>
<a href="#" target="_blank">
3-2
</a>
</li>
<li>
<a href="#" target="_blank">
3-3
</a>
<ul>
<li>
<a href="#" target="_blank">
3-3-1
</a>
</li>
<li>
<a href="#" target="_blank">
3-3-2
</a>
</li>
<li>
<a href="#" target="_blank">
3-3-3
</a>
</li>
<li>
<a href="#" target="_blank">
3-3-4
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
4
</a>
<ul>
<li>
<a href="#" target="_blank">
4-1
</a>
</li>
<li>
<a href="#" target="_blank">
4-2
</a>
</li>
<li>
<a href="#" target="_blank">
4-3
</a>
</li>
</ul>
</li>
</ul>
</div>
<!--Main text area-->
<div id="section">
<div id="scroll">
<h2>
<u>
Header
</u>
</h2>
<p>
Writing goes here
</p>
</div>
</div>
</body>
</html>