Its very strange, I had it working for a little while and then all of the sudden it stopped working. I'm pretty sure I didn't touch any of my code relating to my navigation bar. If anyone can let me know what is wrong that would be greatly appreciated. Heres my code. (The hover effect is not working for my navigationbar)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Revision 2</title>
<style type="text/css">
body{
width:90%;margin:auto;min-width:600px;max-width:5000px;
background-image: url('background3.jpg')
}
#header {
position:absolute;
}
#logo {
position:absolute;
top: -70px;
left: -70px;
z-index: 2;
}
#mainContent {
position:absolute;
top: 155px;
width: 915px;
height: 800px;
background-color: #CCF;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden;
}
#mainNavigationBar {
position:absolute;
top: 100px;
width: 913px;
height: 45px;
background-color: #CCF;
overflow: hidden;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border: solid 1px white;
}
#mainNavigationBar a {
color: #666;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none;
display: inline-block;
line-height: 45px;
padding-left: 10px;
padding-right: 10px;
}
#mainNavigationBar a: hover {
color: #0C6;
background-color: #0CF;
}
</style>
</head>
<!------------------------------------------------------------------------>
<body>
<div id="wrapper"> <!--Wrapper containing all website elements-->
<div id="header">
<a href="#"><img src="header3.jpg" /></a>
</div>
<div id="logo">
<a href="#"><img src="logo.png" /></a>
</div>
<div id="mainContent"> <!--This is the main box of the site-->
</div>
<div id="mainNavigationBar">
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
</div>
</div> <!--Final wrapper div-->
</body>
</html>