why do list items stack on top of each other?

nested lists

[dannam]

I'm still banging my head against the wall with sprites and dropdown menus, and I've never seen this before....

The items in the nested list do not display block. They stack on top of each other. Any idea why? Thank you.

HTML lists:

<ul id="PrimaryNav" class="MenuBarHorizontal">
<li id="about"><a href="about-widgets.htm" title="About widgets"> </a></li>
<li id="prod"><a id="prodactive" class="MenuBarItemSubmenu" href="javascript:;"></a>

<ul id="SubMenuVertical">
<li id="navaustrian" style="padding-top: 4px;"><a href="austrian-widget.htm" title="Austrian Widgets"> </a></li>
<li id="navaustralian"><a href="australian-wine.htm" title="Australian Widgets"> </a></li>
<li id="navfrench"><a href="widgets-french.htm" title="French Widgets"> </a></li>
<li id="navgerman"><a href="widgets-german.htm" title="German Widgets"> </a></li>
<li id="navitalian"><a href="italian-widgets.htm" title="Italian Widgets"> </a></li>
<li id="navslovenian"><a href="widgets-slovenia.htm" title="Slovenian Widgets"> </a></li>
<li id="navspanish"><a href="spanish-widgets.htm" title="Spanish Widgets"> </a></li>
<li id="navalpha"><a href="widgets-producers-alphabetically.htm"> </a></li>
</ul>
</li>

<li id="events"><a href="widgets-events.htm" title="Widgets Events"> </a></li>
<li id="blog"><a href="http://www.example.com/" title="Blog" target="_blank"> </a></li>
<li id="join"><a href="http://www.example.com/" title="Join our email list" target="_blank"> </a></li>
</ul>

CSS:
/* -- PRIMARY NAVIGATION -- */

#navcomplete {
position: relative;
z-index: 1000;
clear:none;
left: 203px;
top: 111px;
}
ul#PrimaryNav {
width: 735px;
height: 26px;
background: url(images-nav/navigation.gif);
margin: 0;
padding: 0;
border: 0px solid #FFF;
}
ul#PrimaryNav li {
margin: 0; padding: 0;
list-style: none;
position: absolute;
top: 0;
}
ul#PrimaryNav li a {
height: 26px; display: block;
}
#about {left: 0; width: 92px;}
#prod {left: 132px; width: 182px;}
#events {left: 353px; width: 72px;}
#blog {left: 462px; width: 118px;}
#join {left: 622px; width: 113px;}

#about a:hover {
background: transparent url(images-nav/navigation.gif) 0 -26px no-repeat;}
#prod a:hover {
background: transparent url(images-nav/navigation.gif)
-132px -26px no-repeat;}
#events a:hover {
background: transparent url(images-nav/navigation.gif)
-353px -26px no-repeat;}
#blog a:hover {
background: transparent url(images-nav/navigation.gif)
-462px -26px no-repeat;}
#join a:hover {
background: transparent url(images-nav/navigation.gif)
-622px -26px no-repeat;
}

/* STYLES FOR DROPDOWN MENU */
ul#SubMenuVertical {
width: 130px;
height: 216px;
margin:0;
padding:0;
position:relative;
list-style:none;
}
ul#SubMenuVertical li{
width: 130px;
float:left;
}
ul#SubMenuVertical a {
display:block;
background: transparent url(images-nav/drop-down-nav.png) 0px 0px no-repeat;
}
ul#SubMenuVertical #navaustrian a { background-position: 0px 0px; height:27px;}
ul#SubMenuVertical #navaustralian a{background-position: 0px -28px; height: 27px;}
ul#SubMenuVertical #navfrench a {background-position: 0px -54px; height: 27px;}
ul#SubMenuVertical #navgerman a {background-position: 0px -81px; height: 27px;}
ul#SubMenuVertical #navitalian a {background-position: 0px -108px; height: 27px;}
ul#SubMenuVertical #navslovenian a {background-position: 0px -135px; height: 27px;}
ul#SubMenuVertical #navspanish a {background-position: 0px -162px; height: 27px;}
ul#SubMenuVertical #navalpha a {background-position: 0px -189px; height: 27px;}

ul#SubMenuVertical #navaustrian a:hover { background-position: -130px 0px; height:27px;}
ul#SubMenuVertical #navaustralian a:hover{background-position: -130px -28px; height: 27px;}
ul#SubMenuVertical #navfrench a:hover {background-position: -130px -54px; height: 27px;}
ul#SubMenuVertical #navgerman a:hover {background-position: -130px -81px; height: 27px;}
ul#SubMenuVertical #navitalian a:hover {background-position: -130px -108px; height: 27px;}
ul#SubMenuVertical #navslovenian a:hover {background-position: -130px -135px; height: 27px;}
ul#SubMenuVertical #navspanish a:hover {background-position: -130px -162px; height: 27px;}
ul#SubMenuVertical #navalpha a:hover {background-position: -130px -189px; height: 27px;}

[edited by: swa66 at 1:19 pm (utc) on Nov. 20, 2009]
[edit reason] No specifics please, see ToS and Forum Charter [/edit]

[likes2burn]

I had this problem, and it was because of the width of the links believe it or not. This may not be the right solution but I accomplished it with a class.

#SubMenuVertical li {width:130px;}
#SubMenuVertical .wine {width:130px;} /*same as your li it is underneath*/

And in the HTML
<li id="navaustrian"><a class="wine" href="austrian-widget.htm" title="Austrian Widgets"> </a></li>
<li id="navaustralian"><a class="wine" href="australian-wine.htm" title="Australian Widgets"> </a></li>

This is the solution presented in a lot of "light weight drop down menus", in which the link has to be the same size as the containing element or else.

With a few simple mods this should work right away.