[RESOLVED] Submenu drop-down menu doesn’t position correctly

I have a horizontal menu with 6 items. Two of the items need a sub-menu (ie, the “news” tab in the main menu needs to have a dropdown consisting of two elements: appearances, headlines)

The problem is when I try to incorporate elements of the dropdown menu, it appears overtop of the primary menu item.

Here’s a sample of the main menu (without dropdown) that works:
[url]http://www.kitchenprose.com/gmtest/index.html[/url]

Here’s the attempted menu with dropdown elements added:
[url]http://www.kitchenprose.com/gmtest/index-test.html[/url]

Also, the appearance of the submenu doesn’t quite match the main menu.

And here’s the pertinent code

HTML:

[CODE]<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”index.html” id=”current”>HOME</a></li>
<li><a href=”news.html”>NEWS</a></li>
<ul id=”subnavlist”>
<li id=”subactive”><a href=”#” id=”subcurrent”>HEADLINES</a></li>
<li><a href=”#”>APPEARANCES</a></li>
</ul>
</li>

<li><a href=”about.html”>ABOUT</a></li>
<li><a href=”gallery.html”>GALLERY</a></li>
<li><a href=”friends.html”>FRIENDS</a></li>
<li><a href=”contact.html”>CONTACT</a></li>
<li><a href=”http://www.gillesmarini.com/forum/” target=”_blank”>FORUM</a></li>
</ul>

</div><!– divNavcontainer –>[/CODE]

CSS:

[CODE]/* ===== NAVIGATION LIST (placed in navcontainer) ===== */

#navlist {margin: 0; padding: 0;}

#navlist ul
{
margin: 0;
white-space: nowrap;
padding: 0;
font-size: 6px;
line-height: .5ex;
}

#navlist li
{
padding: 0;
display: inline;
list-style-type: none;
letter-spacing: 0.55em;
}

#navlist a
{
padding: 0 10px 0 20px;
border: 0;
background-color: #fff;
}

#navlist a:link, #navlist a:visited
{
color: #c69c69;
text-decoration: none;
}

#navlist a:hover
{
border: 0;
color: #fff;
background-color: #c69c69;
background-image: url(images/navHover.gif);
}

#active a:link, #active a:visited, #active a:hover
{
border: 0;
background-color: #FC9;
background-image: url(images/navCurrent.gif);
color: #c69c69;
}

/*subnavlist */

ul#subnavlist li
{
display: inline;
list-style-type: none;
padding-left: 20px;
font: bold 10px arial, verdana, sans-serif;
line-height: 22px;
}

#subnavlist a
{
text-decoration: none;
color: #699;
}

#subnavlist a:hover
{
text-decoration: none;
color: #666;
}

#subnavlist
{
text-align: left;
margin: 0;
padding-left: 0;
}

ul#subnavlist li a#subcurrent {
border: 0;
background-color: #FC9;
background-image: url(images/navCurrent.gif);
color: #c69c69;
}

ul#navlist ul
{
position: absolute;
top: 0;
left: 4em;
}

ul#navlist ul li a, ul#navlist ul li a:hover, ul#navlist ul li a#current { background-image: none; }[/CODE]

Thank you so much for any help you can give me.

Also in #CSS _↴