Header will not expand and list items hidden from view - css

Question

I have 2 issues with my test page. I'm trying to get header to take up width of page. I set the width to 100% but it still will not expand out to width of page. And the dropdown for the "Links" item appears behind the wrapper element and therefore it is not possible to click on any of the underlying links. Thank you.
Codepen: https://codepen.io/centem/pen/dBdwxw
header {
margin: 0 auto;
width: 100%
height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display:none;
}
ul li:hover ul li {
display: block;
}

Answer 1

header is already set to 100% witdth. However, you've set fixed width and the background to the li. You can simply use flexbox and set flex: 1 to the items without worrying about their width.
body {
margin: 0 auto;
font: 1.1em;
background-image: url('CNDsplash.jpg');
background-repeat: no-repeat;
background-position: center;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 400;
}
header {
margin: 0 auto;
width: 100%;
height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
display: flex;
}
header ul li {
height: 40px;
flex: 1;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
#title-heading {
float: left;
}
.hidden {
display: none;
}
.wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 2px solid #eee;
background: #fefefe;
opacity: 0.9;
filter: alpha(opacity=90);
/* for ie8 and earlier */
}
.upload-console {
/*background: #fefefe;*/
/*border: 2px solid #eee; */
padding: 20px;
/*opacity: 0.9;*/
/*filter: alpha(opacity=50);*/
/* for IE8 and earlier */
}
.upload-console-header {
padding: 0 0 20px 0;
margin: 0;
border-bottom: 2px solid #eee;
font-weight: 600;
margin-bottom: 20px;
}
.upload-console-drop {
height: 200px;
border: 2px dashed #ccc;
line-height: 200px;
color: #ccc;
text-align: center;
margin-bottom: 20px;
}
.upload-console-drop.drop {
border-color: #222;
color: #222;
}
.upload-console-body {
margin-bottom: 20px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
box-sizing: border-box;
margin-bottom: 20px;
}
.bar-fill {
height: 30px;
display: block;
background: cornflowerblue;
width: 0;
border-radius: 3px;
-webkit-transition: width 0.8s ease;
transition: width 0.8s ease;
}
.bar-fill-text {
color: #fff;
line-height: 30px;
margin-left: 5px;
}
.upload-console-upload {
border-bottom: 2px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.upload-console-upload span {
float: right;
}
<header>
<ul>
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li><a>Docs</a></li>
<li><a>Links</a>
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</ul>
</li>
</ul>
</header>
<div class="wrapper">
<div id="form-heading">
</div>
<div class="upload-console">
<br>
<h2 class="upload-console-header">FTS</h2>
<div class="upload-console-body">
<h3>Select files</h3>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="standard-upload-files" multiple>
<input type="submit" value="Upload files" id="standard-upload">
</form>
<h3>Or drag and drop files below</h3>
<div class="upload-console-drop" id="drop-zone">
Just drag and drop files here
</div>
<div class="bar">
<div class="bar-fill" id="bar-fill">
<div class="bar-fill-text" id="bar-fill-text"></div>
</div>
</div>
<div id="uploads-finished" class="hidden">
<h3>Processed Files</h3>
</div>
</div>
</div>
</div>

Answer 2

body {
margin: 0 auto;
font: 1.1em;
background-image: url('CNDsplash.jpg');
background-repeat: no-repeat;
background-position: center;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 400;
}
header {
margin: 0 auto;
width: 100% height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
display: flex;
z-index: 1;
position: relative;
}
header ul li {
display: flex;
flex-grow: 1;
height: 40px;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
width: 100%;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
#title-heading {
float: left;
}
.hidden {
display: none;
}
.wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 2px solid #eee;
background: #fefefe;
opacity: 0.9;
filter: alpha(opacity=90);
/* for ie8 and earlier */
}
.upload-console {
/*background: #fefefe;*/
/*border: 2px solid #eee; */
padding: 20px;
/*opacity: 0.9;*/
/*filter: alpha(opacity=50);*/
/* for IE8 and earlier */
}
.upload-console-header {
padding: 0 0 20px 0;
margin: 0;
border-bottom: 2px solid #eee;
font-weight: 600;
margin-bottom: 20px;
}
.upload-console-drop {
height: 200px;
border: 2px dashed #ccc;
line-height: 200px;
color: #ccc;
text-align: center;
margin-bottom: 20px;
}
.upload-console-drop.drop {
border-color: #222;
color: #222;
}
.upload-console-body {
margin-bottom: 20px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
box-sizing: border-box;
margin-bottom: 20px;
}
.bar-fill {
height: 30px;
display: block;
background: cornflowerblue;
width: 0;
border-radius: 3px;
-webkit-transition: width 0.8s ease;
transition: width 0.8s ease;
}
.bar-fill-text {
color: #fff;
line-height: 30px;
margin-left: 5px;
}
.upload-console-upload {
border-bottom: 2px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.upload-console-upload span {
float: right;
}
<header>
<ul>
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li class="dropdown"><a>Links</a>
<ul class="dropdown-content">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</ul>
</li>
</ul>
</header>
<div class="wrapper">
<div id="form-heading">
</div>
<div class="upload-console">
<br>
<h2 class="upload-console-header">FTS</h2>
<div class="upload-console-body">
<h3>Select files</h3>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="standard-upload-files" multiple>
<input type="submit" value="Upload files" id="standard-upload">
</form>
<h3>Or drag and drop files below</h3>
<div class="upload-console-drop" id="drop-zone">
Just drag and drop files here
</div>
<div class="bar">
<div class="bar-fill" id="bar-fill">
<div class="bar-fill-text" id="bar-fill-text"></div>
</div>
</div>
<div id="uploads-finished" class="hidden">
<h3>Processed Files</h3>
</div>
</div>
</div>
</div>
<script src="upload.js"></script>
<script src="global.js"></script>