css - oversized div within small div

I need to make a menu that looks like this:

The upper entries need to have a right margin of (lets say) 20px.

Problem arises, when I add the sub-menus, especially like the red one with the «large Menu-Entry». The top menu needs to stay in place and all the sub-menus need to be centered under that top menu. But either the top-entry is enlarged (which makes the green part shift to the right) or the sub-entries aren't positioned at the center of the top-entry... As the menu-entries are dynamic, I can't predict how wide they are and thus I can't apply any math.

Also - the sub-entries are only visible, if the user is on the according page (means - the green part only shows «Menu1» if the user is on the red page)

I «could» use some javascript to do it after the page loaded, but I'm trying to avoid that.

I tried all sorts of stuff, including negative margins and whatnot - but nothing seems to work... Any ideas?

[edit]

some html here - tried to fumble around like crazy with no results (except the one from Brad, b开发者_Python百科ut that one doesn't work with IE)

<div class="center">

            <div class="menu-container">
                <div class="menu-title">Title 1</div>
                <div class="menu-items">
                    Testomat<br />
                    Yo, this is a long text
                </div>
            </div>

            <div class="menu-container">
                <div class="menu-title">Title 1</div>
                <div class="menu-items">
                    Testomat<br />
                    Yo, this is a long text
                </div>
            </div>

        </div>

CSS:

.menu-container{
    width: 100px;
    float: left;
}

.menu-items, .menu-title{
    text-align: center;
}

If you don't care about IE: Have you tried using display:table-cell?

You could try something like:

<div class="menu-container">
  <div class="menu-title">
      Menu1
  </div>
  <div class="menu-items">
      <div class="menu-item">large menu item</div>
      <div class="menu-item">sub</div>
      <div class="menu-item">sub</div>
  </div>
</div>

With CSS:

.menu-container {
   display : table;
   width: 100px;
}

.menu-title, .menu-items {
  display : table-cell;
  width: 100%;
  text-align: center;
}

Naturally, the content within the table-cells will wrap to 100px.

My first approach uses different html mark-up to your own, but gives the visual effect you you're looking for with, perhaps, a slight increase in semantics:

html:

<dl>
    <dt>Title One</dt>
    <dd>Testomat</dd>
    <dd>Yo, this is a long text</dd>
</dl>
<dl>    
    <dt>Title Two</dt>
    <dd>Testomat</dd>
    <dd>Yo, this is a long text</dd>
</dl>

css:

dl {
    width: 100px;
    float: left;
    position: relative;
    text-align: center;
    color: #0f0;
}
dl:nth-child(odd) {
    color: #f00;
}

Demo of the above at JS Fiddle.

On looking at your posted mark-up, and applying the css:

.menu-container {
    width: 100px;
    float: left;
    text-align: center;
    overflow: hidden;
    color: #0f0;
}

.menu-container:nth-child(odd) {
    color: #f00;
}

JS Fiddle demo

I'm not sure why you're experiencing difficulties. Admittedly, at the moment, I'm only able to test on Chrome and IE 8 (Win XP), but the above seems to work. Am I missing something important in your problem description?