Drop down menu woes

[Carl]

Hello,

I'm having a few issues with some drop down menus I'm working on. It's easiest to just show a screen cap demonstrating what I want to do and how it incorrectly displays in Internet Explorer and Opera. Basically, I'm trying to position some hidden DIVs directly below a main navigation bar. It works as desired in Firefox but I end up with a scroll bar in IE and Opera.

Here are some screen caps showing what I mean. Note that I've intentionally left the menus visible here and the style for the submenus isn't done yet (the giant Flash movie is going to be remade so that it's smaller as well). The first image shows how I'd like the menus/submenus to be positioned.

http://img194.imageshack.us/img194/931/menus01.jpg [img194.imageshack.us]
Firefox 3.6.3

http://img140.imageshack.us/img140/8919/menus02.jpg [img140.imageshack.us]
IE7/8

http://img97.imageshack.us/img97/1764/menus03.jpg [img97.imageshack.us]
Opera 10.53

Obviously I'm doing something wrong here but I'm at a complete loss. I've been staring at this for a while now and I'm sure I'm missing something simple. But...in the meantime, some help would be greatly appreciated.

Here's my relevant CSS and layout:

#header, #site {
 background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
 overflow: auto;
 width: 850px;
}

#footer {
 background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
 width: 850px;
 height: 41px;
}

#navbar {
 font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 12px;
 background: url(images/bg_header.jpg) no-repeat right top;
 padding-top: 0px; padding-bottom: 0px;
 margin-left: auto; margin-right: auto;
 overflow: auto;
 width: 830px; height: 154px;
 z-index: 30;
}

#menu-navbar {
 border: 1px solid #000000;
 padding: 0px;
 margin-top: 135px; margin-left: 10px;
 text-align: left;
 height: 16px;
 float: left;
}

#menu-navbar div div
{
 position: absolute;
 /*visibility: hidden;*/
 margin: 0;
 padding: 0;
}

.menu {
 font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
 display: block;
}

.menu ul {
 border: none;
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}

.menu li {
 margin: 0px;
 padding: 0px;
 float: left;
}

.menu ul li a {
 font-weight: bold; text-decoration: none; font-variant: small-caps;
 padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
 cursor: pointer;
 height: 16px;
 display: block;
}

.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
 background: url(images/bg_menu.png) repeat-x left top;
 color: #FFFFFF;
}

.menu ul li a:hover, .menu ul li#current a {
 background: url(images/bg_menu_hover.png) repeat-x left top;
 text-decoration: none;
}

.submenu {
 font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
 display: block;
}

.submenu ul {
 border: none;
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}

.submenu li {
 margin: 0px;
 padding: 0px;
 float: left;
}

.submenu ul li a {
 font-weight: bold; text-decoration: none; font-variant: normal;
 padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
 cursor: pointer;
 height: 16px;
 position: relative;
 display: block;
}

.submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
 background: url(images/bg_menu.png) repeat-x left top;
 color: #FFFFFF;
}

.submenu ul li a:hover {
 background: url(images/bg_menu_hover.png) repeat-x left top;
 text-decoration: none;
}

<div id="header">
 <div id="navbar">
 <div id="menu-navbar">
 <div class="menu">
 <ul>
 <li>
 <a href="#">Menu Item 1</a>
 <div id="submenu_01" class="submenu">
 <ul>
 <li><a href="">Submenu Item 1</li>
 <li><a href="">Submenu Item 2</li>
 <li><a href="">Submenu Item 3</li>
 </ul>
 </div>
 </li>
 <li>
 <a href="#">Menu Item 2</a>
 <div id="submenu_02" class="submenu">
 <ul>
 <li><a href="">Submenu Item 1</li>
 <li><a href="">Submenu Item 2</li>
 <li><a href="">Submenu Item 3</li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </div>
</div>

<div id="site">
 Stuff
</div>

<div id="footer">
 More stuff
</div>

Thanks in advance! :)

[Carl]

Oops, I'm sorry. I left out the DOCTYPE I'm using. I'm using XHTML 1.0 Transitional.

[Carl]

Alright, I've more or less fixed this. :) Everything works great except in IE7. But more on that in a sec.

My solution was to take the navbar right out of #header and put it in its own container beneath it. I then set the position of #header, #site, and this new navbar container to relative. Finally I set margin-top to a negative value to have it sit on top of #header.

My new layout:

<div id="header" class="center">
Header info
</div>

<div id="navbar" class="center">
 <div id="menu">
  <div class="menu">
   <ul>
    <li>
     <a href="#">Menu Item 1</a>
     <div id="submenu_01" class="submenu">
      <ul>
       <li><a href="">Submenu Item 1</li>
       <li><a href="">Submenu Item 2</li>
       <li><a href="">Submenu Item 3</li>
      </ul>
     </div>
    </li>
    <li>
     <a href="#">Menu Item 2</a>
     <div id="submenu_02" class="submenu">
       <ul>
       <li><a href="">Submenu Item 1</li>
       <li><a href="">Submenu Item 2</li>
       <li><a href="">Submenu Item 3</li>
      </ul>
     </div>
    </li>
   </ul>
  </div>
 </div>
</div>

<div id="site" class="center">
 Stuff
</div>

<div id="footer" class="center">
 More stuff
</div>

<div id="site-info" class="center">

</div>

And the new corresponding CSS:

div#header, div#site {
 background: #FFFFFF url(images/bg_top-container.jpg) repeat-y center top;
 overflow: auto;
}

div#header, div#site, div#footer, div#site-info {
 width: 850px;
 position: relative;
 z-index: 1;
}

div#navbar {
 position: relative;
 z-index: 2;
}

div#footer {
 background: #FFFFFF url(images/bg_bottom-container.jpg) no-repeat center bottom;
 height: 41px;
}

div#navbar, div#site-info {
 width: 830px;
}

div#menu {
 border-left: 1px solid #000000; border-right: 1px solid #000000;
 padding: 0px;
 margin-top: -18px; margin-left: 172px;
 text-align: left;
 height: 16px;
 float: left;
}

div#menu div div
{
 position: absolute;
 visibility: hidden;
 margin: 0;
 padding: 0;
 z-index: 30;
}

.menu {
 font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 13px;
 display: block;
}

.menu ul {
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}

.menu li {
 margin: 0px;
 padding: 0px;
 float: left;
}

.menu ul li a {
 font-weight: bold; text-decoration: none; font-variant: small-caps;
 padding-left: 0.5em; padding-right: 0.5em; padding-top: 0px; padding-bottom: 0px;
 cursor: pointer;
 height: 16px;
 display: block;
}

.menu ul li a:link, .menu ul li a:visited, .menu ul li a:active {
 background: url(images/bg_menu.png) repeat-x left top;
 color: #FFFFFF;
}

.menu ul li a:hover, .menu ul li#current a {
 background: url(images/bg_menu_hover.png) repeat-x left top;
 text-decoration: none;
}

.submenu {
 font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px;
 border: 1px solid #000000;
 display: block;
}

.submenu ul {
 border: none;
 list-style-type: none;
 margin: 0px;
 padding: 0px;
}

.submenu li {
 margin: 0px;
 padding: 0px;
 float: left;
}

.submenu ul li a {
 font-weight: bold; text-decoration: none; font-variant: normal;
 padding-left: 1.5em; padding-right: 1em; padding-top: 3px; padding-bottom: 3px;
 cursor: pointer;
 height: 16px;;
 display: block;
}

.submenu ul li a:link, .submenu ul li a:visited, .submenu ul li a:active {
 background: url(images/bg_submenu.png) repeat-x left top;
 color: #222222;
}

.submenu ul li a:hover {
 background: url(images/bg_submenu_hover.png) repeat-x left top;
 color: #e2e7eb;
 text-decoration: none;
}

.center {
 margin-left: auto; margin-right: auto;
}

Ok, so yeah. Works great. BUT, teeny tiny problem in IE7. It's ignoring display: block in .submenu ul li a:
[img69.imageshack.us...]
IE7

When it should be displaying like this:
[img99.imageshack.us...]
Firefox

I've tried declaring display: block; to be important, I've placed redundant display: blocks in every single .submenu declaration, and nothing seems to take. Any ideas?