I am using a CSS drop down menu I found online.

I have everything working fine except when one of the navigation items is too lone to fit on one line.

What happens is the nav item expands over to the second line, which is fine, but it the overlaps the next item on the navigation. The next line of the navigation is not moving down to accommodate the double lined item above.

If I increase the spaces between the items (which I don't want to do) it looks like the gap is different than the rest.....because it is.

Can someone help me to amend the code so it understands to drop the next navigation item down if the item above spans more than one line.

I'm pasting the HTML & CSS code below...



COOLMENU.CSS
Code:
body {
	margin-top: 0px;
	font-family: Arial;
}
h2 { font-size: 12px; color: #999; padding: 5.5em 0;}
h3 { font-size: 14px; }

HEADER {
	font-size: 12px;
	color: #003;
}

/* Structure
------------------------------------------*/
#coolMenu,
#coolMenu ul {
	list-style: none;
}
#coolMenu {
	float: left;
}
#coolMenu > li {
	float: left;
}
#coolMenu li a {
	display: block;
	height: 3.5em;
	line-height: 1.2em;
	padding: 0 0em;
	text-decoration: none;
}
#coolMenu ul {
	position: absolute;
	display: none;
	z-index: 999;
}
#coolMenu ul li a {
	width: 140px;
	
}
#coolMenu li:hover ul.noJS {
	display: block; 
}


/* Main menu
------------------------------------------*/
#coolMenu {
	font-family: Arial;
	font-size: 10px;
	background: #000;
}
#coolMenu > li > a {
	color: #000;
	font-weight: bold;
}
#coolMenu > li:hover > a {
	background: #000;
	color: #000
}


/* Submenu
------------------------------------------*/
#coolMenu ul {
	margin-top: 45px;
	background: #000;
}
#coolMenu ul li a {
	color: #e0ddc3;
}
#coolMenu ul li:hover a {
	background: #000;
	color: #b48c03;
}



RESET.CSS
Code:
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:x-small;
	vertical-align:top;
	background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}


HEADER {
	font-size: 12px;
	color: #003;
}


a {
    margin:0;
    padding:0;
    font-size:97%;
    vertical-align:middle;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#000;
    color:#000;
    text-decoration:none;
	vertical-align:middle;
}

/* change colours to suit your needs */
mark {
    background-color:#000;
    color:#000; 
    font-style:italic;
    font-weight:bold;
	vertical-align:middle;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
	vertical-align:middle;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:10px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

PAGE.HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "">

<html>

<head>

<link href="css/reset.css" rel="stylesheet" type="text/css"/>
<link href="css/960.css" rel="stylesheet" type="text/css"/>
<link href="css/coolMenu.css" rel="stylesheet" type="text/css" media="screen"/>



  <title></title>
<style type="text/css">
<!--
.centre {
	text-align: center;
}

.tablediv {
  position:relative;width:950px;height:600px;
}

.tablediv TABLE {
  position:absolute;z-Index:100;left:0px;top:0px;width:950px;height:600px
}

.ss {
  position:absolute;centre:0px;top:0px;width:100px;height:163px;
}

.ss IMG{
  width:100px;height:263px;
}
.ss1 {  position:absolute;centre:0px;top:0px;width:150px;height:163px;
}
.centre table {
	text-align: center;
}
body {
	background-color: #1c1c1c;
}

-->
</style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

<body class="centre">
<p>&nbsp;</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><div class="tablediv" onmouseover="zxcSFSlideShow.Pause('i1');" onmouseout="zxcSFSlideShow.Auto('i1');" >
      <div id="i1" class="ss1" > <a><img src="images/jaspersA.jpg" alt="image" border="0" ></a>
        <table width="950" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="130" colspan="3" valign="middle" align="center"><img src="images/jaspers_headerA.png" width="950" height="130">
              <table width="950" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="600">&nbsp;</td>
                  <td align="center" valign="middle" bgcolor="#00FF00"><div class="container_16">
                    <div class="grid_16"><span class="centred_cell"><br/>
                      </span>
                      <ul id="coolMenu" bgcolor="000">
                        <li></li>
                        <li></li>
                        <li> <span class="centred_cell"><a href="#"><img src="images/jaspers_crown_logo2.png" width="140" height="80" align="left"></a> </span>
                          <ul class="noJS">
                            <li class="centred_cell">
                              </p>
                              <p>                      
                            </li>
                            <li class="centred_cell"><a href="#">WELCOME</a></li>
                            <li class="centred_cell"><a href="#">JASPERS</a></li>
                            <li class="centred_cell"><a href="#">BRIDAL SALON</a></li>
                            <li class="centred_cell"><a href="#">CEREMONY</a></li>
                            <li class="centred_cell"><a href="#">THE ORANGERY</a></li>
                            <li class="centred_cell" height="180"><a href="#">COLONIAL HIGH TEA WEDDING<br></a></li>
                            <li class="centred_cell"><a href="#">STAY</a></li>
                            <li class="centred_cell"><a href="#">THE KITCHEN</a></li>
                            <li class="centred_cell"><a href="#">FIND US</a></li>
                          </ul>
                        </li>
                        <li></li>
                      </ul>
                    </div>
                  </div></td>
                  <td width="210">&nbsp;</td>
                </tr>
              </table></td>
            </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
      </div>
    </div>
      <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>
  <script type="text/javascript">
<!--



var zxcSFSlideShow={

 Next:function(id,ud){
  var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
  if (o){
   this.rotate(o,o.n+ud);
  }
 },

 GoTo:function(id,n){
  var o=this['zxc'+id];
  if (o&&o.ary[n]){
   this.rotate(o,n);
  }
 },

 Auto:function(id,ms){
  var o=this['zxc'+id],oop=this;
  if (o){
   o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
  }
 },

 Pause:function(id,ms){
  var o=this['zxc'+id];
  if (o){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 init:function(o){
  var id=o.ParentID,iary=o.ImageArray,ms=o.FadeDuration,hold=o.AutoHold,srt=o.AutoStart,p=document.getElementById(id);
  if (p&&iary instanceof Array){
   var img=p.getElementsByTagName('IMG')[0],c=document.createElement('IMG'),ms=typeof(ms)=='number'&&ms>0?ms:1000,a,ary=[],z0=0;
   if (!img){
    img=c.cloneNode(false);
    img.src=iary[0][0];
    img.width=p.offsetWidth;
    img.height=p.offsetHeight;
    a=document.createElement('A');
    iary[0][1]?a.href=iary[0][1]:null;
    iary[0][2]?img.title=iary[0][2]:null;
    a.appendChild(img);
    p.appendChild(a);
   }
   c.style.position='absolute';
   c.style.zIndex='1';
   c.style.left=c.style.top='-3000px';
   p.appendChild(c);
   for (;z0<iary.length;z0++){
    iary[z0][5]=new Image();
    iary[z0][5].src=iary[z0][0];
   }
   o.id=id;
   o.img=img;
   o.a=p.getElementsByTagName('A')[0];
   o.ary=iary;
   o.c=[c];
   o.ms=ms;
   o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
   o.n=0;
   this['zxc'+id]=o;
   typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
  }
 },


 rotate:function(o,auto){
  clearTimeout(o.to);
  var n=o.n,p=this.pos(o.img),lgth=o.ary.length-1;
  o.auto=auto===true;
  n=o.auto?n+1:auto;
  n=n>lgth?0:n<0?lgth:n;
  if (o.ary[n][5].width>40){
   typeof(o.OnFade)=='function'?o.OnFade(n):null;
   o.c[0].src=o.ary[n][5].src;
   o.c[0].style.width=o.img.width+'px';
   o.c[0].style.height=o.img.height+'px';
   this.animate(o,o.c,0,100,new Date(),o.ms);
   o.c[0].style.left=0+'px';
   o.c[0].style.top=0+'px';
   o.a?o.a.removeAttribute('href'):null;
   o.a&&o.ary[n][1]?o.a.href=o.ary[n][1]:null;
   o.img.removeAttribute('title');
   o.ary[n][2]?o.img.title=o.ary[n][2]:null;
   o.n=n;
  }
  else {
   o.ary.splice(n,1);
   o.auto?this.Auto(o.id):null;
  }
 },


 animate:function(o,a,f,t,srt,mS){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   n=Math.max(n,0);
   oop.opac(a[0],n);
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
  }
  else {
   o.img.src=a[0].src;
   a[0].style.top='-3000px';
   typeof(o.OnComplete)=='function'?o.OnComplete(n):null;
   o.auto?oop.Auto(o.id,o.hold):null;
  }
 },

 opac:function(o,n){
  o.style.filter='alpha(opacity='+n+')';
  o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
 },

 pos:function(o){
  var rtn=[0,0];
  while(o){
   rtn[0]+=o.offsetLeft;
   rtn[1]+=o.offsetTop;
   o=o.offsetParent;
  }
  return rtn;
 }


}

zxcSFSlideShow.init({
 ParentID:'i1',       // the unique ID name of the image.                              (string)
 ImageArray:[        // an array of arrays defining the images.                       (array)
  // field 0 = the image scr.
  // field 1 = (optional) the image link href.
  // field 2 = (optional) the image title.
   ['images/jaspersA.jpg', "", "Link1"],
   ['images/jaspersB.jpg', ", "Link2"],
   ['images/jaspersC.jpg', "", "Link3"],
   ['images/jaspersD.jpg', "", "Link4"],
   ['images/jaspersE.jpg', "", "Link5"]
 ],
 FadeDuration:5000,   //(optional) the fade duration in milli sceconds.                (number, default = 1000)
 AutoHold:5000,      //(optional) the auto rotation hold delay in milli sceconds.     (number, default = FadeDuration*4)
 AutoStart:1000,     //(optional) the auto rotation start  delay in milli sceconds.   (number, default = FadeDuration*4)
 OnFade:function(n){ //(optional) a function to call when starting fade of new image. (function, default = no function)
  // n =the current imasge index.
 },
 OnComplete:function(n){ //(optional) a function to call when fade in is complete.    (function, default = no function)
  // n =the current imasge index.
 }
});

//-->
</script>
</p>
</body>

</html>