Thank you cflsystems and cherie for your responses.
cherie - thanks for pointing that out to me. Yes, I rarely use !important, but sometimes when you're modifying someone else's code, it's a necessary work around. Unfortunately, after correcting all my !importants the problem still exists.
cflsystems - if I start changing the padding and margins on the header and main content areas, I will affect the way those areas look - something I don't want to do.
Today I found something that supports my "overflow problem" theory. In the CSS for the outer container div (#content-container), there is an overflow: hidden;. If I remove that overflow, my flyout menu appears the way it should (NOT truncated at the top where the bottom of the header is), however, with that overflow removed, I get some nasty unwanted overflow beneath the page footer for the length of a whole page (which is most likely why the overflow: hidden; is there). If I move the overflow: hidden; down to the next inner container level (#content-container2), then my flyout menu is truncated.
Keep in mind I▓m supposedly overriding this overflow: hidden; much further down the CSS cascade with the CSS from my original post (now with corrected !important). I know I▓m targeting the <ul> with this CSS because I can change the width and see a change on the page, I can also move the starting position of the flyout menu, no problem. So, it seems as if the CSS cascade is not working the way it normally does (lower level declarations override higher level).
Here▓s the container CSS:
#content-container{clear:both;
width:100%;
float:left;
padding-bottom:0
;margin-top:183px;
overflow:hidden;
position:relative;
background:url(../images/left_bg.gif) repeat-y left;}
#content-container2{float:left;
width:200%;
position:relative
;right:100%;}
Any ideas?