Drop Down Navigation problem

I am trying to integrate a drop down menu in a horizontal menu that i have completed. The problem is that when you hover over the list element it will drop down but it doesn't drop down under the right list element. It appears that it is dropping down at the beginning of my <ul>. What do i have to do to fix this?

Heres my css.

#hor_menu {margin:0; padding:0; font: bold 11px/1.5em Verdana;}
#hor_menu h2 {font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px;}
#hor_menu img {border: none;}
#tabsJ {float:left; width:100%; background:#fff; font-size:93%; line-height:normal; border-bottom:1px solid #24618E;}
#tabsJ ul {margin:0; padding:10px 10px 0 50px; list-style:none;}
#tabsJ li {display:inline; margin:0; padding:0;}
#tabsJ a {float:left; background:url("../images/tableftJ.gif") no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none;}
#tabsJ a span {float:left; display:block; background:url("../images/tabrightJ.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#24618E;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {color:#FFF;}
#tabsJ a:hover {background-position:0% -42px; display:block;}
#tabsJ a:hover span {background-position:100% -42px; display:block;}
#tabsJ div {position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; width:200px; border: 1px solid #3c3c3c;}
#tabsJ div a {position: relative; display: block; margin: 0; padding: 5px; width: 190px; white-space: nowrap; text-align: left;text-decoration: none; background: #EAEBD8; color: #3c3c3c; font: bold 11px arial;}
#tabsJ div a:hover{background: #999999; color: #FFF;}


heres my html

<div id="hor_menu">

<div id="tabsJ">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2" onmouseover="mopen('m2')" onmouseout="mclosetime()"><span>Link 2</span></a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
</div>
</li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
<li><a href="#" title="Link 6" onmouseover="mopen('m2')" onmouseout="mclosetime()"><span>Link 6</span></a></li>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
<a href="">link</a>
</div>
<li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>

</div>


Thanks in advance.

Hi i had a look but none of the links display any drop down whatsoever I'm guessing because I need the js functions:

mopen(), mclosetime(), mcancelclosetime()

Can you provide those?

sure thing...here you go. I'd actually like to eliminate the javascript but i don't know how to do that.



var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

Bare with me was eating mcdonalds ill have a play now for you

Ok I had a look and play with your code and got stressed with it. The porblem was this

#tabsJ ul li ul
{
position: absolute;


The problem with that is that is using absolute positioning. Because absolute positioned elements get there initial position from there first block level parent not inline elements. And since your <li> are inline and have to be inline to go horizontal then the absolute positioned elements inside wont start at the li but instead at the next block parent which in this case was the parent div. So what i did is redesign your code pretty much from scratch using a vertical menu i know works then hacked the style to look something like the menu you posted. Hope you don't mind well here is the code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical Drop Down List Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">

function list_hover(ul)
{
ulElement = document.getElementById(ul);
if (ulElement)
{
if (ulElement.className == 'closed')
{
ulElement.className = "open";
}
else
{
ulElement.className = "closed";
}
}
dlElement = document.getElementById("dl_" + ul);
if (dlElement)
{
if (dlElement.className == 'dl_closed')
{
dlElement.className = "dl_open";
}
else
{
dlElement.className = "dl_closed";
}
}

}

</script>


<style type="text/css">
/*top menu bar css*/

dl, dt, dd
{
margin: 0;
padding: 0;
}


.dl_closed
{

color:#24618E;
}

.dl_open
{
background-color:white;
color:#0066cc;
}

.closed
{
display:none;
}

.open
{
display:block;
}

#positioner
{
position:absolute;
top:0;
padding:0;
z-index:10;
margin-left:4px;
}

#header_top_bar
{
height:16px;
font: bold 10px/1.5em Verdana;
color:#24618E;
padding-top:3px;
margin-top:10px;
padding-bottom:3px;
border-bottom:1px solid #24618E;
}

#header_top_bar dl
{
float:left;
margin-right:30px;
cursor:default;
}

#header_top_bar dl a,#header_top_bar dl a:visited
{
text-decoration:none;
color:#24618E;
}

#header_top_bar dl dd
{

}

#header_top_bar dl ul
{
list-style:none;
padding:0;
padding-bottom:8px;
padding-top:1px;
border:solid 1px #0066cc;
border-top:solid 1px white;
margin-bottom:0;
margin-left:0px;
margin-top:-1.5em;
background: #EAEBD8;
width:200px;
border: 1px solid #3c3c3c;
position:absolute;

}

#header_top_bar dl ul li
{
width:200px;
height:16px;
display:block;
}


#header_top_bar dl ul a, #header_top_bar dl ul a:visited
{
color: #3c3c3c;
font: bold 11px Arial;
text-decoration:none;
padding-left:5px;
padding-right:5px;
cursor:pointer;
display:block;
}

#header_top_bar dl ul a:hover
{
color:#7f1113;
background: #999999; color: #FFF;
/*color:#ffee00;*/
text-decoration:none;
display:block;
}

</style>
</head>
<body>
<div id="header_top_bar" align="left">
<dl>
<dt><a href="">Link 1</a></dt>
</dl>
<dl id="dl_list1" class="dl_closed" onmouseover="return list_hover('list1');" onmouseout="return list_hover('list1');">
<dt>Link 2</dt>
<dd>
<ul id="list1" class="closed">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="">Link 3</a></dt>
</dl>
<dl>
<dt><a href="">Longer Link Text</a></dt>
</dl>
<dl>
<dt><a href="">Link 5</a></dt>
</dl>
<dl id="dl_list2" class="dl_closed" onmouseover="return list_hover('list2');" onmouseout="return list_hover('list2');">
<dt>Link 6</dt>
<dd>
<ul id="list2" class="closed">
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="">Link 7</a></dt>
</dl>
</div>
</body>
</html>


Thats pretty much the same. But will need a bit of hacking on your part to get it exact. Thats all I can be bothered to do at this time. I tested this on FF and IE8. Hope it works for other browsers too?

PS the most important thing you need to learn is about docutype declarations and how to validate your code at http://validator.w3.org

Thanks for taking the time out of your day to help a stranger. Works good. I just had to adjust the margin to get the drop down under the menu but all else was good.

Thanks alot.