...

View Full Version : Dropdown Nav pushing content



s25w89
01-14-2013, 12:48 AM
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;
}

s25w89
01-14-2013, 12:53 AM
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.

LearningCoder
01-14-2013, 01:25 AM
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.

s25w89
01-14-2013, 05:51 AM
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 :)

LearningCoder
01-14-2013, 08:20 AM
haha no problem! :thumbsup:

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

Kind regards,

LC.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum