Because all the elements within it that would give it a height are floated, taking them out of the flow of the document. #mainmenu consequently has no height, just a margin-bottom. You can see this if you view the element in Firebug (see sig).
Have a try clearing the float by adding overflow:auto to #mainmenu ul. Once you've done this #mainmenu will have a height as well as the margin and the subsequent elements will be pushed down.