horizontal drop menu - display:block question

[lindyc]

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...

/* 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

<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>

[rguy84]

Not to address your question, but that is a incorrect use of heading tags.

[lindyc]

Hi - not sure why you think that. It makes sense structurally and it validates without any warnings...

[lindyc]

I found my error! I actaully didn't have the correct doc-type declaration and namespace at the top of the document I was testing it in.

[markbrown4]

Hi,

I don't have a problem with your use of headings - but you should only have one ul element.
There's no point in wrapping a sublist in a parent list with only one li element.

<ul id="menu">
  <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>
  <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>
  <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>
  <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>

[Dan Schulz]

I do. Headings are for page content (the text we read), not menus. Also, search engine spiders will pay more attention to the content in the menu headings, which is something you probably don't want. Keep them in the content, where they belong.

[rguy84]

Ditto on Dan's comment.


.sorry for my tardyness