Issues with positioning pullup menu

Hi there, I'm looking for help with fixing a pullup menu that is positioned at the bottom of the browser window, and is designed to "pullup" (instead of drop down) when the user rolls over it. No matter what I do, the pullup part of the menu will not come to rest flush against the hover state of the top navigation tab, in this case named 'portfolio'. Instead, it will not go any lower than the top of the navbar, resulting in a big vertical gap between the nav tab and the menu. I've tried wrapping the menu in a div with a specified height, playing with the z-index, and absolutely positioning the menu, and nothing has worked!

The link to check out the page is http://www.jaffydesigns.com/2010_redesign/, and the relevant code is below. Any assistance is much appreciated!

HTML
<div id="nav_wrapper">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Portfolio</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#web" class="underline">Web</a></li>
<li><a href="#email" class="underline">Email</a></li>
<li><a href="#logo" class="underline">Logo</a></li>
<li><a href="#print" class="underline">Print</a></li>
<li><a href="#other">Etc.</a></li>
</ul>
</dd>
</dl>
</div>
</div>

CSS
#nav_wrapper {
margin: 28px 0 0 595px;
width: auto;
height: auto;
}
* {
padding:0;
margin:0
}
.dropdown {
float: left;
}
.dropdown dt {
width: 123px;
height: 35px;
margin: 0;
font-weight: bold;
cursor: pointer;
color: #ff9900;
text-align: center;
}
.dropdown dt:hover {
background: url(../images/nav_drop_bottom.gif) no-repeat; color: #ffffcc;
}
.dropdown dd {
position: relative;
right: 66px;
overflow: hidden;
width: 175px;
padding-left: 14px;
background: #333333;
opacity: 0;
z-index: 10000;
}
.dropdown ul {
list-style: none;
}
.dropdown li {
display: inline
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
float: left;
width: 78px;
height: 31px;
margin: 1px 1px 0 0;
font-size: .7em;
color: #ffffff;
text-decoration: none;
text-align: center;
background: #666666;
border: 1px solid #999999;
}
.dropdown a:hover {
background: #ff9900;
color: #ffffff;
border: 1px solid #ffcc66;
text-decoration: underline;
}

Start with fixing the errors in your markup, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jaffydesigns.com%2F2010_redesign%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Thanks Abduraooft, I'm slapping my forehead for missing that step right now. I'll fix the errors and report back.

Apologies for the delay in replying!

Ok, I've gone through to make sure my HTML and CSS are validating, however the positioning issue persists.

HTML - http://validator.w3.org/check?uri=http://www.jaffydesigns.com/2010_redesign/&charset=(detect+automatically)&doctype=Inline&group=0

Stylesheets
- http://jigsaw.w3.org/css-validator/validator?uri=http://www.jaffydesigns.com/2010_redesign/styles/styles.css&profile=css21&usermedium=all&warning=1&lang=en
- http://jigsaw.w3.org/css-validator/validator?uri=http://www.jaffydesigns.com/2010_redesign/styles/dropdown.css&profile=css21&usermedium=all&warning=1&lang=en

Not sure, just have a try by the following .dropdown dd {/*dropdown.css (line 5)*/
background:#333333 none repeat scroll 0;
overflow:hidden;
padding-left:14px;
position:relative;
right:66px;
top:-71px;
width:175px;
z-index:10000;
}

Updated - the menu appears to have moved down, but it's now obscuring the tab when I roll over it.

http://www.jaffydesigns.com/2010_redesign/

Try increasing that negative top value by some.
Not sure how your script at http://www.jaffydesigns.com/2010_redesign/js/dropdown.js calculates the top value.