Horizontal Nav Bar Submenu Behavior

Hello everyone! Below is some code I have been working on. I am relatively new to webpage design, but I think I have a decent grasp on HTML and CSS. I have stared at this code on my notepad for hours trying to get it to do what I want it to. I would appreciate any insight on this problem. Thanks for reading!

I have almost everything the way i want it, except when I hover over a link in my menu it pushes the rest of my page content down. I would like my submenu to overlap other content on my page when I hover over it. I believe that the float selector might be causing the issue here. I think this because I have designed my entire page using floats.

I am building the webpage on my computer, using Notepad++ to design it and Mozilla Firefox v16.01 to view it. My goal here isn't to make it cross compatible on all browsing platforms. My goal here is to simply learn the basics of how CSS works. I am wary to post the full code here, because of it's size. I can and will post my entire code here if it will help. Honestly, it isn't that big, but I will hold back unless it is needed. I have read the posting rules and am hoping that I have submitted my post correctly. If not I'm sorry.

-up until now
I have designed the webpage using divs within a container. It is important to note that I do not want the links to re-size when I re-size my screen. When I try absolute positioning, the content overlaps with the desired effect, but re-sizes itself when the page is re-sized. Also, when I position it absolutely with no float, I have to include a left and top selector to move it where I want in relation to the page. That's why I have an extra div box below my title. Unfortunately, this method doesn't work because it isn't static and when the page is re-sized it doesn't follow the rest of the page. Combing floats with positioning seems to be causing every result except the one I want. I think z-index might be the savior here, but I have been unable to get it working properly with this code.

I have taken two screenshots to further explain what I am trying to do. New users aren't allowed to post URL's, hope this is ok.

imageshack.us/a/img221/3779/pageselectedlink.jpg
imageshack.us/a/img19/1368/pageunselectedlink.jpg

At this point it almost seems best to scrap this code and restart. I'm thinking that anchoring all my page content isn't the best way to go. Automatic resizing seems to be a better option when designing a webpage, but I think that my page looks good the way it is.

/*Nav. Bar*/
.nav
{
float: left;
width: 976px;
border-top: 4px dashed yellow;
margin: 20px;
padding-top: 8px;
padding-left: 0px;
padding-right: 0px;
list-style-type: none;
text-align: center;
}

.nav li
{
float: left;
width: 187.2px;
background-color: black;
}

.nav a
{
text-decoration: none;
color: red;
display: block; /*forces a line break after each link*/
}

.nav a:hover
{
background-color: blue;
border: dashed yellow 3px;
}

.submenu
{
display: none; /*Hides Submenu*/
list-style-type: none;
padding-left: 0px;
padding-right: 0px;
}

li:hover .submenu
{
display: block; /*Displays Submenu*/
position: relative;
}
/*Nav. Bar end of code*/

I have been learning with w3schools, until I felt brave enough to tackle a horizontal navigation bar. I understand that this may be an advanced CSS concept, but I have tried hard to understand each element.

Most tutorials I see online are for inline horizontal navigation bars, without submenus. Unfortunately, i would like the submenu option. This code has been racking my brain

Thanks again for any help,
Rob

Seeing the rest of the code might help (including the body). I don't have much experience with sub-menus, but I guess my only question would be why does the navbar have to float? Nothing from your navbar up should need to float, especially for doing a basic page like you have.

Also, when inputing your code here, do it like this:

[*code*]
put all your code here
[*/code*]

But do it without the "stars**." I only put them there so those code tags would show up. It will make a nice little scroll box with all your code in it, so even if your code is long it won't be too bad. And make sure you use the [] brackets instead of {} like you're used to when writing code.