Dropdown Nav pushing content

Hey guys sorry if this is a repost. I've scoured google trying to figure out how to stop my dropdown nav menu from pushing the rest of the content down without compromising the rest of the page.

I'm really new to this and have been teaching myself for a little over a week now. As far as I can tell my HTML is solid and it must be purely a CSS issue. Any help will be really appreciated. Thanks!

Here's the code:


* {
margin:0px;
padding:0px;
background-color: #4DB84D;
}

div.container {
position:relative;
margin:0px auto;
width:90%;
height:900px;
background-color:#368136;
}

h1 {
text-align:center;
border-bottom:2px solid #006907;
margin-bottom:35px;
font-size:55px;
font-family:courier;
color:white;
}

#tm {
position:absolute;
top:10px;
right:540px;
font-size:11px;
color:white;
}

/* =================== Navigation ====================== */

#navdiv {
position:relative;
margin:0px auto;
left:220px;
}

a:link, a:visited {
color:white;
}

ul#navmenu, ul.sub1, ul.sub2 {
list-style-type:none;
font-size:13px;
}

ul#navmenu li {
position:relative;
margin:0px auto;
float:left;
width:150px;
text-align:center;
margin-right:3px;
}

ul#navmenu a {
display:block;
width:100%;
margin:0px auto;
height:25px;
line-height:25px;
border-radius:5px;
border-style:outset;
border-color:#000;
text-decoration:none;
background-color:#377A3C;
}

ul#navmenu .sub1 a {
margin-top:1px;
}

ul#navmenu .sub2 a {
margin-left:3px;
}

ul#navmenu li:hover > a {
background-color:#949494;
}

ul#navmenu li:hover a:hover {
background-color:#000000;
}

ul#navmenu ul.sub1 {
display:none;
position:aboslute;
z-index:1;
top:25px;
left:0px;
}

ul#navmenu ul.sub2 {
display:none;
position:absolute;
z-index:1;
top:0px;
left:153px;
}

ul#navmenu li:hover .sub1 {
display:block;
}

ul#navmenu .sub1 li:hover .sub2 {
display:block;
}

.darrow {
font-size:7pt;
position:absolute;
top:5px;
right:4px;
background-color:transparent;
}

.rarrow {
font-size:6pt;
position:absolute;
top:10px;
right:4px;
background-color:transparent;
}



/* ======================= Content ======================= */

div.main {
position:relative;
margin:100px;
width:90%;
min-height:700px;
overflow:hidden;
clear:both;
background-color:#368136;
}

#column1 {
margin-top:20px;
width:860px;
float:right;
min-height:700px;
padding-left:10px;
color:white;
background-color:#7BB57F;
}

div#img {
position:absolute;
right:50px;
background-color:#7BB57F;
}

#img, desc {
font-size:12px;
font-weight:bold;
color:black;
}

#extradiv {
position:absolute;
top:400px;
left:300px;
width:700px;
height:250px;
background-color:#567F59;
padding-left:5px;
color:white;
}

#sidebar {
margin-top:20px;
min-height:700px;
margin-right:660px;
padding-left:5px;
background-color:#565756;
color:white;
}

#extradiv2 {
position:absolute;
top:100px;
left:20px;
width:180px;
height:200px;
padding-left:5px;
background-color:#567F59;
color:white;
}

/* ====================== Footer ================= */

#footer1 {
min-height:60px;
color:white;
background-color:#0F3D0F;
font-size:12px;
text-align:center;
line-height:28px;
}

#footer2 {
min-height:30px;
color:white;
background-color:#000;
font-size:11px;
font-style:oblique;
text-align:center;
line-height:28px;
overflow:hidden;
}

P.S. - My sub2 (2nd dropdown menu) goes over the content just fine. It's the sub1 (initial dropdown menu) that pushes everything. I have no idea why.

I think it could be this typo, highlighted in red:

ul#navmenu ul.sub1 {
display:none;
position:aboslute;
z-index:1;
top:25px;
left:0px;
}


Let me know how you get on.

Kind regards,

Lc.

Good lord man, seriously? Two letters out of place and that was all it took to screw everything up.

Coding is a precise art isn't it? Learning that quickly.

Thank you so much for pointing that out without making me feel like an idiot :)

haha no problem! :thumbsup:

I havent got enough fingers for the amount of times I've done it :p

Kind regards,

LC.