There seems to be an issue with some of the links in my navigation bar not working properly. It appears that they are being covered by an iframe element, preventing them from changing color when clicked.
Although the iframe element is visibly below the nav bar, I have used .wrapper1 to reposition it on the page. Interestingly, when I remove either the iframe element or the .wrapper1 object, the problem goes away and the links start working as intended.
Any thoughts or insights on this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper1 {position:fixed; left:50%; top:80px;}
iframe {
background: rgba(256,256,256,0);
position:relative;
top:60px;
left:-400px;
}
ul {
width:800px;
position:relative;
left:-50%;
list-style: none;
background: none;
margin:0px;
padding:0px;
}
li {
background:none;
display:inline;
width:100%;
padding-left:40px;
color:#FFF;
font-size: 16pt;
font-family:'Rammetto One', cursive;
}
a {
text-decoration: none;
color:#FFF;
}
a:hover, a:active {
color:#333;
}
</style>
</head>
<body bgcolor="#000">
<div class="wrapper1">
<ul>
<li><a href="introduction.html" target="content_frame">Introduction</a></li>
<li><a href="services.html" target="content_frame">Services</a></li>
<li><a href="testimonials.html" target="content_frame">Testimonials</a></li>
<li><a href="contact-us.html" target="content_frame">Contact Us</a></li>
</ul>
<div>
<div class="wrapper1">
<iframe name="content_frame" width="800" height="300"></iframe>
</div>
</body>
</html>
Preview (jsFiddle)