Hi, I am having real trouble with my UL nav submenu. My problem is large gaps between my lists. I have two items within the nav that have sub items. What I have now is as close to what I want as possible but it is still not right. There is large gaps between the sub menu items and the first level menu items. I tried to stick to one list and use li classes but this gave me even more problems so I alternated between the level one menu <ul class="menu"> and sub menu <ul class="sub">. I don't know if my problem is in the html or the css. I really hope someone can shed some light on it!?

(tested on ff and safari)

The CSS:-

img{border:0px;}
.flt{float:left;}
.menubg{position:absolute; top:100px; left:0px; width:160px; height:500px; background-color:#8d8d8d;}
.menu {float:left; clear:left; font:bold 11px Arial, Helvetica, sans-serif;}
.sub{float:left; clear:left; font:bold 9px Arial, Helvetica, sans-serif;}

.menu li {
margin:0px 0px 0px 0px;
list-style:none;
}

.sub li {
margin:0px 0px 0px 0px;
list-style:none;
}

.sub li a, .sub li a:visited {
width:100px;
height:25px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#fff;
text-decoration:none;
padding:4px 0 0 8px;
}

.menu li a, .menu li a:visited {
width:150px;
height:25px;
margin:0px 0px 2px -32px;
position:relative;
display:block;
color:#fff;
text-decoration:none;
background:url(img/nav/menubg2.jpg) no-repeat;
padding:4px 0 0 8px;
}

.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited {
background:url(img/nav/menubg1.jpg) no-repeat;
text-decoration:none;
}

.sub a:hover, .sub a:active,
.sub li.current_page_item a, .sub li.current_page_item a:visited {
background:url(img/nav/menubg1.jpg) no-repeat;
text-decoration:none;
}
.bot{clear:left;}

The html:-

<img src="img/nav/top.jpg" width="202" height="4" alt="" class="top flt" />
<div class="menubg">
<ul class="menu">
<li class="current_page_item"><a href="">Item a</a></li>
<li class=""><a href=".htm" title="">Item b</a></li>
<li class=""><a href=".htm" title="">Item c</a></li>
</ul>
<ul class="sub">
<li class="sub"><a href=".htm" title="">Sub item a</a></li>
<li class="sub"><a href=".htm" title="">Sub item b</a></li>
</ul>
<ul class="menu">
<li class=""><a href=".htm" title="">Item d</a></li>
</ul>
<ul class="sub">
<li class="sub"><a href=".htm" title="">Sub item c</a></li>
</ul>

</div>

<img src="img/nav/bot.jpg" width="202" height="3" alt="" class="bot flt" />