The navigation on this page is not transparent. Whenever I link to a specific part of the page, some text becomes hidden behind the navigation bar. This is illustrated in the image below: https://i.sstatic.net/h0ExX.png
What I desire is a navigation bar like this: https://i.sstatic.net/iYiL1.png
You can see in the first image that the "background" text is obscured by the navigator.
Here is my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
position: fixed;
top: 0;
width: 100%;
background-color: rgb(255, 255, 255);
opacity: 1.0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
-moz-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5);
box-shadow: 0px 2px 20px -5px rgba(0, 0, 0, .5);
padding: 5px;
}
li {
float: right;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 25px;
text-decoration: none;
}
li a:hover {
font-family: cursive;
}
h2 {
font-size: 30px;
font-family: Futura, Trebuchet MS, Arial, sans-serif;
}
h3 {
font-size: 30px;
font-family: Brush Script MT, cursive;
}
h2, h3 {
width: 50%;
height: 60px;
margin: 0;
padding: 0;
display: inline;
}
</style>
</head>
<body>
<header id="header">
<ul>
<li><a href="#experience">Experience</a></li>
<li><a href="#background">Background</a></li>
<li><a href="#home">Home</a></li>
</ul>
</header>
<!-- Home -->
<table align="center" border="0" cellpadding="5" cellspacing="5", width="450", style="margin-top:100px">
<tr id="home">
<td>
<div id="image">
<img src="" style="margin:auto;width:150px;height:200px;display:block" />
</div>
</td>
<td>
<div id="section">
<h2> sss </h2>
<h3>sss</h3>
<p>ssssssss</p>
</div>
</td>
</tr>
<tr id="background">
<td colspan="2">
<div id="background1">
<h2 style="font-family: Futura, Trebuchet MS, Arial, sans-serif;"> Background </h2>
<p>Big Star was an American power pop band formed in Memphis, Tennessee, in 1971... (Full article goes here) ...The group broke up in 1974, but reorganized with a new line-up nearly 20 years later. (Full article continues)...</p>
<hr>
</div>
</td>
</tr>
</body>
</html>