Thank you Paul, Eric, and Rayzur for helping me with this. Thank you for helping me with the css problem i had i appreciate your guys’ help.
However why implementing it on my website, i encountered some issues. I think I tackled the majority of the problem but there was a minor thing that I was hoping you guys could help me with.
So um i’m just going to explain the problem, my solution, and the minor problem that derived from my solution which i can hope you can help me with…
Inside the #header div tag, which i talked about before, i have my navigation menu. This is a complex navigation menu; therefore, I have not attached it’s html or css, but can if it would help.
But it is basically like this:
<div id="headerContainer">
<div id="header">
<li class="sitepoint" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
<li class="w3schools" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
<li class="google" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
<div id="navigationContianer"> <!--Hold Search & Navigation inline -->
<div id="global-Navigation"></div>
<div id="search"></div>
</div>
</div>
<div id="subNavContainer"></div>
</div>
When i added the css code Paul gave me, for the hot spot links in the css background of the #header div, it negated the css of my navigation menu or at least messed it up.
The code Paul gave me:
<style type="text/css">
#header {
position:relative;
background:url(assets/media/images/navigation/header.png) no-repeat 0 0;
width:1000px;
height:190px;
margin:auto;
}
#header ul {
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
left:0;
z-index:2;
}
#header li {
/*position:absolute; */
text-indent:-999em;
}
#header li a {
display:block;
width:100%;
height:100%;
outline:0;
}
#header li a:hover {
z-index:99;
}
li.sitepoint {
top:62px;
left:0;
width:144px;
height:126px;
}
li.w3schools {
top:0px;
left:133px;
width:498px;
height:126px;
}
li.google {
top:82px;
left:648px;
height:37px;
width:347px;
}
</style>
As seen in the attachment cssProblem.jpg
What it looked like before I added the code is shown in cssNotAdded.jpg
I fixed the problem by seeing which style element conflicted with my navigation. I found that upon deletion of the 22nd line of the css,
position:absolute;
for #header li {} , the navigation reappeared properly but only the link anchor for the penguin worked. So I added the styling just in the <li> tags the following
<li class="sitepoint" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
<li class="w3schools" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
<li class="google" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
Now the three <li> and anchor tags are in the proper positions and work. As well as the main-navigation, which is inside the #header div as well.
My problem occurs with some positioning. On hover of each of my navigation elements a corresponding subNav appeared underneath.
I had the container that my subNav is placed in on hover right underneath the navigation’s container. With the addition if the three <li> tags the subNav container; & therefore subNav when written in the container, is slightly higher than it should be— as seen in this screen shot: notLowEnough.gif
It appears behind the main navigation because the main navigation’s z index is higher because it has a higher importance than the sub navigation.
Anyhow, So my problem comes to positioning the sub nav where it belongs. If I use one <br /> tag it is not enough and two <br /> tags are too much…
I am speaking about putting the line breaks here towards the end of this code snippet:
<div id="headerContainer">
<div id="header">
<li class="sitepoint" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
<li class="w3schools" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
<li class="google" style="position:absolute;"><a title="Home" href="http://team1504.com"></a></li>
<div id="navigationContianer"> <!--Hold Search & Navigation inline -->
<div id="global-Navigation"></div>
<div id="search"></div>
</div>
</div>
<br/>
<br/>/* 2 line-breaks push it down too much */
<div id="subNavContainer"></div>
</div>
As seen in 2BR.gif
So is there a way i can use one and a half <br /> or padding or some other positioning that will always place by subNav directly below the main navigation. So it looks like it did before I added the <li> tags
as seen in working.gif
I hope you can help me get my header styled correctly in the proper positioning and have the hotspots anchors working! 
If you need any further explanation or have any comments, just ask
Again my utmost gratitude to you guys thus far, thanks in advance,and Regards, Team 1504
Thank you guys for everything especially Paul.