Hello.
I am trying to adapt a horizontal drop menu using nested lists and css. I am having trouble with firefox displaying the first ul element. It is displaying only half the height of the tag and I can't figure out why.
May it have something to do with where I apply my display:block for the vertical nested ul's?

I want to retain the h2 tag on the horizontal and h3 on the vertical if possible...

Code CSS:
/* CSS Document */
 
/* HORIZONTAL DROP DOWN MENU */
 
 
 
#menu {
width: 600px; /* set width of entire menu here */
background: #ffffff;
float: left; /* this makes the first UL horizontal */
 
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 150px;  /* set width of each menu item here - when multiplied by no of menu-items should equal width above */
float: left; /* this makes the first UL horizontal */
}
 
 
/*  COLOURING ETC */
 
#menu a {
text-decoration: none;
color: #ffffff;
display: block;
}
 
 
#menu h2, #menu h3 {
margin: 0;
}
 
#menu h2 a, #menu h3 a {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 2px 3px;
color: #ffffff;
border-left: 8px solid #999999;
text-decoration: none;
background: #CC0000;
margin-right: 4px;
}
 
#menu h3 {
border-top: 1px solid #ffffff;
}
 
#menu a:hover  {
border-left: 8px solid #cccccc;
text-decoration: none;
background: #C95B5B;
 
}
 
/*   -------- positioning the SUBMENUS --------------
 
The position: relative; on the <li> elements establish containing blocks for the descendant <ul> elements.
 
All secondary levels and deeper are given position: absolute; and a high z-index in order to make them appear, drop down above following content. the third level and deeper lists are the ones we want to move so "offset" positioning co-ordinates only required to be input onto them.
*/
 
#menu li {
position: relative; }
 
#menu ul ul {
position: absolute;
z-index: 500;
}
 
#menu ul ul ul {
top: 0;
left: 100%;
}
 
/*   -------- HIDING AND REVEALING --------------*/
 
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
 
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
 
 
 
/* FIX FOR IE  */
body {
behavior: url(csshover.htc);
font-size: 100%;
}
 
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}

example of my HTML is

Code HTML4Strict:
<div id="menu">
<ul>
  <li><h2><a href="#">menu1</a></h2>
    <ul>
      <li><h3><a href="" title="">menu1-sub1-item1</a></h3></li>
      <li><h3><a href="" title="">menu1-sub1-item2</a></h3></li>
	  <li><h3><a href="" title="">menu1-sub1-item3</a></h3></li>
    </ul>  
  </li>
</ul>							
 
<ul>
  <li><h2><a href="#">menu2</a></h2>
  	 <ul>
      <li><h3><a href="#" title="">menu2-sub1-item1</a></h3></li>
      <li><h3><a href="#" title="">menu2-sub1-item2</a></h3></li>
	  <li><h3><a href="#" title="">menu2-sub1-item3</a></h3></li>
    </ul>  
  </li>
</ul>							
 
<ul>
  <li><h2><a href="#">menu3</a></h2>
  	 <ul>
      <li><h3><a href="" title="">menu3-sub1-item1</a></h3></li>
      <li><h3><a href="" title="">menu3-sub1-item2</a></h3></li>
	  <li><h3><a href="" title="">menu3-sub1-item3</a></h3></li>
    </ul>  
  </li>
</ul>							
 
 
<ul>
  <li><h2><a href="#">menu4</a></h2>
    <ul>
      <li><h3><a href="" title="">menu4-sub1-item1</a></h3></li>
      <li><h3><a href="" title="">menu4-sub1-item2</a></h3></li>
    </ul>
  </li>
</ul>							
 
 
</div>