A solution

After a week of mucking about trying different things to fix the problem I was having with the CSS menus dropping down underneath the content section, I found a remarkably simple solution that I didn’t expect to work, but did, at least for IE 7.

MovableType’s built-in templates tend to suffer a little bit from div-itis IMO, but they work pretty well and once you figure things out, makes styling pretty easy.

The basic structure for the menu and content looks something like this:

<div id="main-navigaton">
<div id="main-navigation-inner">(insert nav stuff here)</div>
</div>

<div id="content">
<div id="content-inner">
<div id="alpha">
<div id="alpha-inner">(insert content here)</div>
</div>
</div>
</div>

By putting

#main-navigation-inner { z-index: 1; }

in my CSS file, I was able to get the drop down menu to pop up to the top. Works in IE7, but since I don’t have a computer with IE6 on it, I don’t know if it works with IE6 yet.